Forums

TheDoc

I must be going crazy here. I don't understand how my searches for a solution to this come up empty. It only means that I'm doing something completely wrong or nobody cares about the issue.

I'm using background-size: cover; to create a full-page background image on the body. More info on that, if you're interested, can be found here: http://css-tricks.com/perfect-full-page-background-image/

This works perfectly across all desktop browsers (I even have a fix in place for IE7 and IE8) but pesky little iOS does not want to play nice. Instead of using the viewport height it uses the body height which, especially on a site that has infinite scroll, can get very long. This results in a completely distorted and unrecognizable background image.

Codepen: http://codepen.io/ggilmore/full/whbzg

Open that up on your desktop to see how it should function, then open it up on an iPhone/iPad to see where it all falls apart.

Any advice would be greatly appreciated.

TheDoc

For now I'm using CSS-Only Technique #2 for iOS.

TheDoc

Any love here?

chrisburton

@TheDoc I tried relentlessly when you posted this and found no solution. Have you tried posting on Stack Overflow?

TheDoc

I haven't - a great idea.

chrisburton

@TheDoc check this page out and see if you can figure it out. It works on iOS.

http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php#

TheDoc

It works, but not like it should.

What that page is doing is stretching the background image the entire length/width of the document, not of the screen size. So imagine if you had a blog with infinite scroll, the image would stretch and get blurrier as you added new posts to the page.

chrisburton

Bummer.

joshuanhibbert

@TheDoc how about using a pseudo-element/fixed element that sits behind the content, and is the height of the viewport for iOS? That way you wouldn't notice the stretched out image behind. It's not ideal, but it should work fine.

TheDoc

Well, right now I'm essentially doing that except with an image.

I updated my 2nd comment as I'm now using CSS-Only Technique #2 for iOS. The problem is that mobile Safari really doesn't handle fixed elements very well. The issue comes into play when users zoom in/out of the page the #bg tries to resize itself.

I think it might just have to be something that I accept, I just don't understand how nobody has a 100% working solution for it.

chrisburton

@TheDoc I doubt she'll know but ask @sazzy on Twitter. This would be a great article for @chriscoyier to blog about.

joshuanhibbert

Ah, forgot about the fixed element weirdness on mobile devices.

Given that the screen size of iOS devices is fairly known (there aren't that many variants), how about taking advantage of background-attachment: fixed;? You would probably need to resize the image for each different iOS device for that to work though.

TheDoc

One more kicker: the image being used can have any dimension as it will be user-uploaded.

joshuanhibbert

Haha, good luck!

meerestier

Did anybody find a clean solution for this? I was digging through piles of Google Search results...

jshjohnson

I have the same problem! So annoying

thejaycarlson

this one works for me...it's jquery, but oh well:

http://srobbin.com/jquery-plugins/backstretch/

madman

I was looking at a solutions for this as well...

Eric

I tried using it for my current project. I didn't like how it blew it up on larger screens and much smaller on smaller screens. I opted for just using individual images.

brainjonbrain

I can get backgrounds to display correctly by combining background-size: cover with background-attachment: scroll.

MacNimble

I manage to get it working like this:

http://codepen.io/anon/pen/sGvxe

Or at least, I think I did -- I only have my iPhone today. My iPads are home. Anyway, hope it helps.

k00ka

I followed @macnimble's excellent suggestion, but was disappointed by the way scrolling works. Here's a fix:

html { 
  background: url(http://placebear.com/1200/800) no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}
body
{
  height:100%;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

Works on iOS 5+.

pyrmont

This is almost perfect. The only problems that I've encountered are:

Touching the menu bar at the top doesn't scroll to the top of the page (presumably because Safari thinks the HTML view hasn't 'moved' at all).
If you scroll up when at the top of the page so that Safari itself moves and then try to scroll down by touching near the bottom of Safari, the content doesn't scroll. I don't encounter this issue unless scrolling up while already at the top of the page and, even when I do encounter it, the content still scrolls if I scroll by touching near the middle of the screen.

So two issues, neither of which seem like deal breakers to me. Thank you so much for solving this!

treehouse : what would you like to learn today?

Forums

[Solved] Full Page Backgrounds on iOS (background-size: cover)