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.