Deanjoe Deanjoe - 11 days ago 5
CSS Question

CSS-HTML viewport page

i'm working on HTML page and, at the smartphone rendering, the page display a white part at the end of the contents(Note, contents ends at the background).
Screenshot

I'm using the following CSS/HTML rules:

<meta name="viewport" content="width=device-width, initial-scale=0" >
@media only screen {

html{width:100%;
height:100%;
}

body {background-image:url("sf.png");
background-repeat:no-repeat;
background-size:auto;
background-attachment:fixed;
}`


Could someone know why it works like that?

Answer

Try background-size:cover; background-position: center center

This expand the image to cover all the area

Comments