- This topic has 20 replies, 3 voices, and was last updated 2 years, 2 months ago by
.
-
Posts
-
I have a container block with a background image on my main page. On mobile the image doesn’t resize and just looks too zoomed in. https://magicalearthretreat.com
Customer Support
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/ky2CZDolNiCKMore info here:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
https://developer.mozilla.org/en-US/docs/Web/CSS/background-positionThat 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/4xhZUzsIFdlNo. 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/ky2CZDolNiCKHmm 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-2143734I 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-2143734Have you modified the URL yet?
- You must be logged in to reply to this topic.