Container background mobil

How To
1

I have created a container full width and 100 vh.
On desktop mode I have inserted an image as background and in mobil just a background color.
Tested it on frontpage and it worked.
Then I wanted to redo it and now it doesnt seem to work?
Still shows the image from desktop mode in mobil view?!

Using Bricks 1.6.3

Video

2

Hi Dan,

Iā€™m curious how it worked on the first try because this isnā€™t possible actually.
The background images can be added for each breakpoint individually (to choose a smaller size on mobile for example), but unfortunately, there is no option to ā€œdisableā€ the image set on another breakpoint. But Iā€™ll provide you a simple custom CSS fix:

Set the background image as usual on the desktop breakpoint and if you like, the background color as well. Next, add the following CSS to your container to style Ā» custom CSS.

If you want to show the background image on screens larger than mobile portrait:

@media (max-width: 478px) {
  root {
    background-image: none;
  }
}

If you want to show the image on screens larger than mobile landscape, set max-width: 767px.
Feel free to add this as an idea to the idea board to see how many users need this feature.

Best regards,
timmse

3

I guess it worked in the first, because I in fact used an image :slight_smile:
The main idea for this project was to recreate an elementor site, using only the Bricksbuilder itself, no code etc.
Just to see how far it would take me, before I needed to use code.

/Dan

4

Just set an overlay on mobile to cover the background image. Is that what you mean? It is a very simple solution.