Home/ Questions/Q 8188819
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T03:03:01+00:00

I’m having a problem using responsive backgrounds. http://poppykeith.co.uk/index.html looks correct on computer browsers and

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0