CODEWITHSUNDEEP
iphonecssmobileresponsive-design
logan m
logan m

Reputation: 37

CSS background-size broken on mobile

I'm building a site with a header element that has a fixed, full-screen background image. It works exactly as intended, except on mobile devices. Both Safari and Chrome on my iphone/ipad are not displaying it correctly--it seems to be scaling to dimensions much larger than the header element.

Here's the full site: http://www.loganmerriam.com/

And the css concerned:

header {
  background: url(../img/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -o-background-size: 100% auto;
  background-size: 100% auto;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Even when I use media queries to load a much smaller background it still only shows a tiny, zoomed section of the image.

Also can anyone direct me to a good way to inspect CSS on idevices?

Upvotes: 0

Views: 7185

Answers (2)

Kevin Lynch
Kevin Lynch

Reputation: 24703

It's because your styles are getting overwritten. Remove the background-size: cover;

header {
  background: url(../img/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -o-background-size: 100% auto;
  background-size: 100% auto;
  -webkit-background-size: cover; // remove this
  -moz-background-size: cover;  // remove this
  -o-background-size: cover;  // remove this
  background-size: cover;  // remove this
}

Upvotes: 1

Kyle Yeo
Kyle Yeo

Reputation: 2368

Not sure if it'll be of much help, but http://screenqueri.es/index.php might do.

Upvotes: 1

Related Questions