CODEWITHSUNDEEP
cssimageaspect-ratio
Renegade Rob
Renegade Rob

Reputation: 403

CSS Body Image stretches when on a mobile device

I have the following CSS script that I would like help with. When its on a PC it looks fine, but when its on a mobile device its stretched. Is there anything I can add to it to keep the aspect ratio please?

body {
    font-family: 'Open Sans', sans-serif;
    background:url(../images/bg.jpg) no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-size: 100% 100%;
}

Thanks all

Rob

Upvotes: 0

Views: 47

Answers (3)

Bharath Kumar
Bharath Kumar

Reputation: 42

If you are concerned about aspect ratio, it's always preferable to use img tag, and the css for image tag would be 

   img.background-image-holder{
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 100%;
    max-width: 100%;
    margin: auto;
    }

here is an working link https://jsfiddle.net/t236ngep/

Upvotes: 0

Raj_King
Raj_King

Reputation: 556

Its because of background-size: 100% 100%; in your code. change it to background-size: 100%. this may work.

Upvotes: 1

Aaron Lavers
Aaron Lavers

Reputation: 986

If you remove background-size: 100% 100% it should work for you.

Fiddle: http://codepen.io/anon/pen/wGVJRg

Upvotes: 3

Related Questions