2

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.

Florin Pop
  • 5,105
  • 3
  • 25
  • 58
Paul Urmston
  • 25
  • 7
  • You have in mind that you need these ultra high res images on an iphone? I mean an iphone comes with retina which means you have not only 72 ppi but more than 300ppi. Youre images need to fit that resolution. – Marcus Rommel Sep 20 '14 at 21:25
  • I was asking more as to why in the emulator it works, but on the actual phone it doesn't. Would I need to put 2 different types of photos on the server so as depending on the device visiting it would then look at either of the photos? That kinda seems to defeat the point of having a responsive website. I have seen that this problem doesn't exist on other responsive websites... just this one. :( – Paul Urmston Oct 02 '14 at 13:58
  • Responsive doesn't mean you don't have to put effort in for creating imagery. BBC for example have a process that creates 9 different images for the varying sizes of websites and those are loaded depending on the resolution/dpi. – Ryan McDonough Oct 02 '14 at 15:00

2 Answers2

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/

Marcus Rommel
  • 1,266
  • 1
  • 12
  • 17
0

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.

aaron-smulktis
  • 38
  • 4