视差图像模糊/ V。 在iPhone上像素化。 需要CSS提示

Question

I am working on a website and have run into a problem.

The background images look really pixellated on iphone screens.

This is the HTML I am using

<div class="parallax img-overlay3" style="background-image:url(img/pictures/food02.jpg)" data-stellar-background-ratio="0.2">

When I look using something like http://mobiletest.me/iphone_5_emulator It looks perfect, but actually looking in the iphone the images seem to be zoomed into a small part of any image I put in there. Have Googled for a few hours and it seems to be a problem with no clear answer.

Answer 1

You need to keep in mind that there are devices that are capable to display images with a resolution higher than 72ppi. For example, the new iPhone 6 plus has 401ppi. You need to provide additional images for these devices. To do so use a media query with Device-pixel-ratio: 2. This is enough. There are also JavaScript solutions for that, but I think you can use Google to find them.

Take a look at this for more CSS snippets: http://stephen.io/mediaqueries/

Answer 2

I'm having this exact same issue (figure8recording.com), but I don't think its necessarily related to the retina images, I get proper looking images on retina devices when I removed the fixed background-attachment..

I think any image with 'background-position: fixed' will enlarge the image to the size of the entire document body, when I set 'background-position: scroll' on mobile devices the images look nice and are positioned correctly.