[Support request] home page background image on mobile

[Cynthia]

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

[Ying]

Hi Cynthia,

Try adding two more lines to your current CSS:

background-size: cover;
 background-attachment: initial;

[Cynthia]

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;
}
}

[Ying]

There’s an extra } above this CSS, try remove that:
https://www.screencast.com/t/6dcAjo4n

[Author]

Posts