Archived topic
Don't show Background Image on Mobile site
5 replies · Started by Reinoud on April 11, 2021
Hi, the loading of the background image is harming my Google page speed score. It won't lazy load, but as the background image is not/hardly visible on mobile anyway I want to prevent the background image being shown on mobile/tablet.
My site is https://www.hardloopcentrum.nl
My background image is in the 'body' section of Customizer -> Background Image
I use Autoptimize and WP-Rocket but I can not get it to lazy load. But not using it on the mobile site would be even better. How do I do this?
I have tried the codes in these topics but it did not work (I tried both in Customizer -> Extra CSS, that is correct right?)
https://generatepress.com/forums/topic/hide-background-cover-image-on-mobile/
https://generatepress.com/forums/topic/how-to-remove-background-image-in-mobile/
What should I do? Thx :)
Hi there,
add the following CSS to your Customizer > Additional CSS:
@media (max-width: 768px) {
body {
background-image: none;
}
}Thank you David,
The weird thing is that now I don't actually see the background image on mobile, but Google Pagspeed is still mentioning this background image:
and that I should do something about it.
Lets try this the other way round.. remove the Background Image from the Customizer then add this CSS:
@media (min-width: 769px) {
body {
background-image: url('https://www.hardloopcentrum.nl/wp-content/uploads/2020/12/hardloop-baan-2.jpg');
background-repeat: no-repeat;
background-size: 100% auto;
background-attachment: fixed;
}
}This should now only make the image request if the device is NOT mobile.
Hi David,
Thank you, that works very well and also decreased my LCP a lot :)
Awesome - glad to be of help!
