How to Fix Blurry Background Images on iOS 7?

Fixed Background Image Issues in iOS 7

Implementing a fixed background image may prove problematic on iOS 7, particularly on the iPad, resulting in a zoomed and blurry image. To resolve this, review the following CSS code:

.header {
  display: table;
  height: 100%;
  width: 100%;
  position: relative;
  color: #fff;
  background: url(../images/boston2.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Possible Solutions:

• Use 'background-attachment: scroll': This will prevent the image from being fixed, but it may at least display it clearly.
• Implement a media query: Limit the fixed background behavior to devices that are not tablets or phones, using a media query like:

@media screen and (max-device-width: 1024px) {
  .header {
    background-attachment: scroll;
  }
}

• Utilize 'background-position: scroll' and JavaScript: Keep the image fixed at the top of the window using JavaScript.

By considering these solutions, you can effectively display a fixed background image on iOS 7 without encountering issues.

The above is the detailed content of How to Fix Blurry Background Images on iOS 7?. For more information, please follow other related articles on the PHP Chinese website!