Background Image

Hi there,

Background images aren't responsive by nature so there isn't anything we can do here.

The only improvement I can think of is to change the size and position on mobile:
https://www.screencast.com/t/ky2CZDolNiCK

More info here:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

That helped but I thought you might be able to provide CSS like this specific to my site:

Hi Lunatrix,

Try this CSS:

@media (max-width: 768px) {
    .gb-container-2dc097b2:before {
        background-size: 1000px;
        background-position: left bottom;
    }
}

Is it possible to have a different background image for mobile? If yes, how?

Is it possible to have a different background image for mobile? If yes, how?

Here you go:

@media (max-width: 768px) {
    .gb-container.gb-container-d038e518:before {
        background-image: url(https://URL-HERE)
    }
}

Did I do this right? I ask because I do not see a difference.

@media (max-width: 768px) {
    .gb-container.gb-container-d038e518:before {
        background-image: url(https://magicalearthretreat.com/wp-content/uploads/2022/03/stock-photo-the-vintage-little-yellow-home-with-blue-door-on-the-green-lawn-in-the-beautiful-garden-hobbit-1106877812.jpg)
    }
}

Can you clear and disable any caching plugins or server caching you are using including SG optimizer?

Yes, everything is disabled.

And it's working?
https://www.screencast.com/t/4xhZUzsIFdl

No. It looks exactly the same.

That is how it looked after make this change

The only improvement I can think of is to change the size and position on mobile:
https://www.screencast.com/t/ky2CZDolNiCK

Hmm looks like you are using the exact same image twice?

The URL here needs to be a mobile-specific image:
https://generatepress.com/forums/topic/background-image-11/#post-2143734

I am using a unique image now but for some reason the original image keeps showing up. I have cleared all the caches and browsing history several times.

Can you share the current code you are using here?

Code?

Yes - this is the active code I see:
https://generatepress.com/forums/topic/background-image-11/#post-2143734

Have you modified the URL yet?