Why Doesn't Background-Size: Cover Work on Mobile Safari?

Covering Background Images on Mobile Safari

Mobile Safari's unique behavior with the background-size: cover property can be frustrating. Instead of covering the entire div, the image often remains centered, unaffected by the width of the viewport. However, this issue can be easily resolved with a few modifications.

Solution:

To make the background image cover the entire div, even on Mobile Safari, adjust the background-attachment property:

.section {
  margin: 0 auto;
  position: relative;
  padding: 0 0 320px 0;
  width: 100%;
}

#section1 {
  background: url(...) 50% 0 no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

#section2 {
  background: url(...) 50% 0 no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

#section3 {
  background: url(...) 50% 0 no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

How it works:

By setting background-attachment: scroll, the image is now allowed to scroll along with the page content. This ensures that the image always covers the full width of the div, regardless of the device or viewport width.

This solution effectively replaces the behavior of background-size: cover on Mobile Safari, allowing you to easily create full-width background images that respond to different screen sizes.

The above is the detailed content of Why Doesn't Background-Size: Cover Work on Mobile Safari?. For more information, please follow other related articles on the PHP Chinese website!