Background image on phones looks shrinked

Question

What changes do I implement so that the backgound image Back.jpg show fulls screen and the content scrolls, rigth now it only works on desktops The content should scroll with the image remain full screen

the image is 1500 width by 1000 height, in phones the image looks shrinked, but on desktops looks fine.

<style>
    html, body {
        margin:0;
        padding:0;
        border:0;
        height:100%;
        background: url(Back.jpg) center no-repeat fixed;
    }
</style>

You are using `background-attachment: fixed;` which does not work that well on iOS (see [here](http://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios) for why). — zgood, May 05 '16 at 18:44

score 0 · Answer 1 · answered May 05 '16 at 18:40

0

background-size:cover; will work with a media query perhaps

answered May 05 '16 at 18:40

Jeffrey Coleman

188
8

score 0 · Accepted Answer · answered May 05 '16 at 18:50

0

<style>
    html, body {
        margin:0;
        padding:0;
        border:0;
        height:100%;
        background: url(Back.jpg) no-repeat center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>

answered May 05 '16 at 18:50

Justin

175
8

it doesnt work still looks bad, is it the image size? 1500 px w by 1000 pc height – Terep May 05 '16 at 19:22

Background image on phones looks shrinked

2 Answers2