- This topic has 51 replies, 1 voice, and was last updated 3 years, 10 months ago by
hc earwicker.
-
AuthorPosts
-
November 1, 2012 at 5:02 pm #40566
TheDoc
MemberI 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: https://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.
November 1, 2012 at 8:01 pm #113145TheDoc
MemberFor now I’m using **CSS-Only Technique #2** for iOS.
November 15, 2012 at 7:52 pm #114490TheDoc
MemberAny love here?
November 15, 2012 at 7:56 pm #114494chrisburton
Participant@TheDoc I tried relentlessly when you posted this and found no solution. Have you tried posting on Stack Overflow?
November 15, 2012 at 7:57 pm #114495TheDoc
MemberI haven’t – a great idea.
November 15, 2012 at 8:00 pm #114496chrisburton
Participant@TheDoc check this page out and see if you can figure it out. It works on iOS.
https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php#
November 15, 2012 at 8:04 pm #114501TheDoc
MemberIt 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.
November 15, 2012 at 8:05 pm #114497chrisburton
ParticipantBummer.
November 15, 2012 at 8:13 pm #114505TheDoc
MemberWell, 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.
November 15, 2012 at 8:15 pm #114506chrisburton
Participant@TheDoc I doubt she’ll know but ask @sazzy on Twitter. This would be a great article for @chriscoyier to blog about.
November 15, 2012 at 8:37 pm #114509TheDoc
MemberOne more kicker: the image being used can have any dimension as it will be user-uploaded.
December 22, 2012 at 8:22 pm #118676meerestier
MemberDid anybody find a clean solution for this? I was digging through piles of Google Search results…
January 6, 2013 at 3:44 am #119977thejaycarlson
Memberthis one works for me…it’s jquery, but oh well:
February 13, 2013 at 4:44 am #124371madman
MemberI was looking at a solutions for this as well…
March 27, 2013 at 8:27 am #129862brainjonbrain
MemberI can get backgrounds to display correctly by combining
background-size: cover
withbackground-attachment: scroll
. -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.