How to Expand Background Images in Mobile Safari Without Using `background-size: cover`?

Expanding Background Images in Mobile Safari Without Using CSS background-size: cover

While CSS background-size: cover is commonly used to expand background images, certain scenarios, particularly on iOS devices, can present challenges. One such issue involves expanding background images to cover divs that can vary in width based on viewport size and content height.

The primary cause of this problem is not background-size: cover but rather background-attachment: fixed. This property prevents the background image from moving with the page content, creating unwanted behavior on mobile devices.

To resolve this issue, consider using a media query to specifically target iPhone devices and set the background-attachment property to scroll. This allows the background image to scroll along with the page, effectively solving the problem.

Here is an example CSS code with a media query that targets iPhone devices:

.cover {
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;

  @media (max-width: @iphone-screen) {
    background-attachment: scroll;
  }
}

By incorporating this media query, you can ensure that your background images will not only expand to cover the entire div, but also adapt gracefully to different viewport sizes on both desktop and mobile devices.

The above is the detailed content of How to Expand Background Images in Mobile Safari Without Using `background-size: cover`?. For more information, please follow other related articles on the PHP Chinese website!