How to remove background image at smaller breakpoint?

How To
1

Hi Bricks users - I have a background image that works at the larger breakpoint sizes, but needs to be replaced with a background color on mobile. I didn’t find any way to simply REMOVE the background image when editing my container at the mobile breakpoints. The BG image assigned at the larger breakpoint doesn’t display in the image locator field, so nothing to remove. The only thing I found to do was to add a fake external URL (#) for a replacement background image, which works, but probably isn’t the preferred solution.

Thanks! David

3 Likes
2

+1

I like your fake external URL - I was trying to go with blend modes of the overlay color, but that only worked with neutral colors. Thanks for the idea.

(Adding an additional 20 characters here so that I can comment on this post)

4

Hey folks, how about a “none” checkbox in the interface so that there is a clear indicator in the settings to show that no image should be loaded in the background of an element. That would be very helpful. Thanks for any other suggestions from the Bricks team.

1 Like
5

Hi,
You can change background size to custom and 0 on mobile break point,
and change blend mod to overlay.
then there is a background image on pc mode,
and no image and only backgrond color on mobile mode.

6

The solution is not to use a background image to begin with. Here’s my notes on how to use a regular image as a background image (speeds up your pages too). You can thank me later!

Don’t use a background image for the hero. This leads to low LCP score with Google. Instead, put a real image inside of the hero section, above the container that will hold all of the hero content.

Make the hero Section element a relative position.

position: relative; /* This allows you to make the hero inside absolute and still stay within this element */

Then make the hero image an absolute position, and place it at the top of the top of the hero section.

object-fit: cover; /* This ensures the image attempts to fill the hero section element */
width: 100%; /* 100% width and height ensures the image stretches if the image is smaller than the screen */
height: 100%;
position: absolute; /* Place the hero image at the top of the hero section element */
top: 0;
z-index: -1;