Making Background Images Play Nicely With iOS
I was testing my site on my iPhone, and my header was…not pretty.
I was using media queries and everything, but it was showing up all blown up and blurry.
@media only screen and (max-width: 800px) { .site-header { background-image:url(images/laptop-mobile.jpg); background-position: fixed no-repeat center center; background-position: fixed no-repeat center center; -moz-background-position: fixed no-repeat center center; -webkit-background-position: fixed no-repeat center center; -o-background-position: fixed no-repeat center center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; } }
Super annoying.
The Internet told me that iOS (at least in previous versions) has had a problem with
position: fixed;
Okay. That’s fine, since it wasn’t parallaxing (that’s totally a word) on mobile anyway.
But getting rid of
position: fixed;
didn’t fix it. Why. Why? INTERNET. YOU ARE NOT COMING THROUGH.
So then I basically started trying every suggestion Google could throw at me, until – bliss! – this post on BrainHappy solved all my problems.
Here’s my fix, modified slightly from the original:
.site-header { background-image:url(images/laptop-mobile.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; min-height: 125px; }
Yay! The Internet came through after all.
Also: waffles.