Shapely – Parallax full background not responsive to mobile

Hi, I have seen multiple people have the same problem regarding the parallax area not resizing on mobile and I am facing the same issue on my home page. Each persons post seemed to require a different CSS and I’m all around lost as to how to make the full background image show when browsing on mobile.

The website is therealtorrosie.com

Hi there

Hope you are having a good day and thank you for your question
Sorry but I can’t see the problem, parallax image behaves normally, I can’t see the problem.
Most probably you are asking this because the image is not covering the mobile screen, this is normal because this is how parallax image works, this is not background image to cover screen by the image.

what I can offer is a code to change your parallax image with a background image on mobile devices

Thanks!
Colorlib Support Team

Yes please, the code to change the parallax image with a background image on mobile would be amazing.

Best

Eric

Hello Eric

Ok, then use this CSS code in appearance > customize > additional css:

@media (max-width: 991px) {
#shapely_home_parallax-2 {
background-image: url(“https://therealtorrosie.com/wp-content/uploads/2019/08/Website-Visual-Home-copy.png”);
}
}

this code will change the image on the homepage
p.s. don’t forget to change URL of the image in the code