Background Size on iOS

iOS: Preparing background images for applications

The way I see it you have 2 options:

1. In here you will find the resolutions of the iPhone's:

• You don't need the @1 image since you don't support iPhone 4 and 4s (iOS 10).
• @2 is for iPhone 5,5c,5S,6 and 6s so basically you can create @2 image of the highest resolution which is the iPhone 6 and this image will work well for the iPhone 5 family.
• Or, you can create an image with resolution for each iPhone and using hard coded logic set the image for each phone.
  i.e: if iphone5c { setImage("iphone5cImage") } etc etc..

---

2. The simplest solution is to create 1 image with the highest resolution. The @3 is the highest for the iPhone 6S+ and it will look amazing for the rest. Don't forget to set the image view as aspect fill.

Also, don't forget to check this thread: How to handle image scale on all the available iPhone resolutions?. It will give you clues of what exactly you are dealing with. TL;DR, It's the options I wrote.

CSS background-size: cover replacement for Mobile Safari

I've had this issue on a lot of mobile views I've recently built.

My solution is still a pure CSS Fallback

http://css-tricks.com/perfect-full-page-background-image/ as three great methods, the latter two are fall backs for when CSS3's cover doesn't work.

HTML

<img src="images/bg.jpg" id="bg" alt="Sample Image">

CSS

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspect ratio */
  min-width: 100%;
  min-height: 100%;
}

why does CSS background-size: cover not work in portrait mode on iOS?

While checking orientation please take note of these points from apple document -

Provide Launch Images :

iPhone-only applications may only have one launch image. It should be in PNG format and measure 320 x 480 pixels. Name your launch image
file Default.png.

iPad-only applications: Create a launch image for each supported orientation in the PNG format. Each launch image must be 1024 x 748
pixels (for landscape) or 768 x 1004 pixels (for portrait).

Universal applications: Include launch images for both iPhone and iPad.

Update Your Info.plist Settings Specify values for the UISupportedInterfaceOrientations and UIInterfaceOrientation

and

Not all browsers recognize the cover keyword for background-size, and as a result, simply ignore it.

So we can overcome that limitation by setting the background-size to 100% width or height, depending on the orientation. We can target the current orientation (as well as the iOS device, using device-width). With these two points I think you can use CSS background-size:cover on iOS in portrait-mode

Here are some other resources I also came across while looking for a solution: Flexible scalable background images, full scalable background images, perfect scalable background images, and this discussion.

background-size: cover looks pixelated on retina display

It's because you are using background-attachment:fixed - for whatever reason this when used with background-size: cover on iOS causes this behavior. (I had this same bug at http://jag.is and just resolved it today).

So if you add the following it should be resolved:

/* for background-size:cover replacement on iOS devices */
@media only screen and (orientation: portrait) and (device-width: 320px), (device-width: 768px) {
    header {
      -webkit-background-size: auto 150%;
      background-attachment: scroll;
    }
}
@media only screen and (orientation: landscape) and (device-width: 320px), (device-width: 768px) {

    header {
      -webkit-background-size: 150% auto;
      background-attachment: scroll;
    }
}

The -webkit-background-size property is for iOS as well because it doesn't recognize the cover property for background-size

Here's the article I found my solutions from.

Lovely site design BTW.

---

Related Topics