CODEWITHSUNDEEP
htmlcssbackground-imageresponsive-design
jshjohnson
jshjohnson

Reputation: 157

Responsive background being squished in portrait mobile

I'm having a problem using responsive backgrounds. http://poppykeith.co.uk/index.html looks correct on computer browsers and in landscape on a mobile browser, however when viewed on a mobile (im using iOS) in portrait, the image is squished to fit the screen.

How would I go about making the image just zoom in in portrait mode and not stretch?

Thanks

Upvotes: 1

Views: 3322

Answers (2)

Scott Vandehey
Scott Vandehey

Reputation: 262

The code you wrote almost works, but the min-width:1024px and the width:100% rules are conflicting with each other and causing the squishing effect you see. Basically, width trumps min-width.

The real technique you want to use is to set that image as a background on the body element, and then use background-size:cover to make the browser load it appropriately

body { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Details: http://css-tricks.com/perfect-full-page-background-image/

Upvotes: 5

jdhartley
jdhartley

Reputation: 486

Check out this article: http://www.teknocat.org/blog/web-development/show/6/mobile-safari-background-image-scaling-quirk

It talks about how Mobile Safari likes to scale down large images.

Upvotes: 0

Related Questions