Archived topic
home page background image on mobile
3 replies · Started by Cynthia on October 31, 2022
I would like the background image to be the full viewport on mobile view. It's currently positioned small at the top on mobile view. I'm using this code to set the background image for desktop but nothing happens when I try using the @media (max-width: 768px) {}
.home .site-content .inside-article {
background-image: url('http://corestaginganddesign.com/wp-content/uploads/2022/10/modern-house-kitchen-dining-room2.jpg');
background-repeat:no-repeat;
}
Also the background image seems to be fixed giving the rest of the body content a parallaxal effect. I would prefer that it is not fixed but instead moves with the content.
Thank you
Hi Cynthia,
Try adding two more lines to your current CSS:
background-size: cover;
background-attachment: initial;Unfortunately that did not work. those two lines of css will change the desktop image to much bigger (which i dont want) so I only added those two lines of css to the mobile css and it still does not change on mobile view.
@media (max-width: 768px) {
.home .site-content .inside-article {
background-image: url('https://corestaginganddesign.com/wp-content/uploads/2022/10/modern-house-kitchen-dining-room2.jpg');
background-repeat:no-repeat;
background-size: cover;
background-attachment: initial;
}
}
There's an extra } above this CSS, try remove that:
https://www.screencast.com/t/6dcAjo4n
