wordpress Background image is not responsive in mobile devices

Question

My website is ( https://www.yahoonewsz.com ) and I've uploaded an image on the public_html folder in the server.

I have used the following code for background

#main {
  background-image: url("image908.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

in advanced CSS section in WordPress.

Why is the image not responsive in mobile?

Thanks.

Answer 1

You're using background-size: cover which according to the background-size docs "Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains."

What this means is that it's scaling to the smallest "non-squished" size it can be that prevents any empty space in the container. Since your site (namely the #main ) is roughly 3000px tall on mobile, the background image is being scaled to ~3000px tall.

If you want to constrain it to max width, use background-size: contain which "Scales the image as large as possible without cropping or stretching the image." meaning that it will always fill the container without being cut off. Note this will give you white space under (or above) the image based on your background-position settings.