Making Background Images Play Nicely With iOS

I was testing my site on my iPhone, and my header was…not pretty.

Background Image Problems

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.

The Beckonweb mobile site - fixed!

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.

Comments are closed.