Home >Web Front-end >HTML Tutorial >Please tell me how to fill the screen with the background_html/css_WEB-ITnose

Please tell me how to fill the screen with the background_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:50:271128browse

c9ccee2e6ea535a969eb3f532ad9fe89
html {
background: -moz-linear-gradient(top, #F1F1F1, #BFF08E);
background: -webkit-linear-gradient(top, #F1F1F1, #BFF08E);
}
body {background:none;}
div{height:200px;}
531ac245ce3e4fe3d50054a55f265927
dc6dce4a544fdca2df29d5ac0ea9906bWhy can’t the background fill the screen? ? 16b28748ea4df4d9c2150843fecfba68


Reply to discussion (solution)

html,body{height:100%;}

html,body{height:100%;}


c9ccee2e6ea535a969eb3f532ad9fe89
html {
background: -moz-linear-gradient(top, #F1F1F1, #BFF08E);
background: -webkit-linear-gradient(top, #F1F1F1, #BFF08E);
}
body {background:none;}
html,body{height:100%;margin:0 ;padding:0;}
div{height:2000px;}
531ac245ce3e4fe3d50054a55f265927
dc6dce4a544fdca2df29d5ac0ea9906bdiv2000px height? Why can’t the background fill the entire screen? 16b28748ea4df4d9c2150843fecfba68

The style is set on the div

<style>div {background: -moz-linear-gradient(top, #F1F1F1, #BFF08E);background: -webkit-linear-gradient(top, #F1F1F1, #BFF08E);}body {background:none;}html,body{height:100%;margin:0;padding:0;} div{height:2000px;}</style><div>

Upstairs Brother, what I want is the full screen background of the webpage...

<style>body {background: -moz-linear-gradient(top, #F1F1F1, #BFF08E);background: -webkit-linear-gradient(top, #F1F1F1, #BFF08E);}html,body{margin:0;padding:0;} div{height:10000px;}</style><div/>


Alas, it seems there is no way to make them all compatible. If the page is small, use
html,body{height:100%;margin:0;padding:0 ;}
If the page is high, don’t use 100%.
Is this the only way to go?

html{
height:100%;
}
No?

Personally, I think it is more troublesome to use CSS alone, because the length and width resolution of each computer is different... The website I made was implemented using JQUERY with JQUERY.aeImageResize:
html:
23614ba09cff8fc5daa6fc3aea63915a///The outside must contain a DIV, and the DIV attribute must be set to overflow:hidden
d786c7dbf43a3888ac410e302f11b776///h is the actual width of the image, w is the actual length of the image
16b28748ea4df4d9c2150843fecfba68

jquery:
function bgResize(id, w, h) {
var img_w = ​​$(id).attr("w");
var img_h = $(id).attr("h");
var w_scale = w / img_w;
var h_scale = h / img_h;
if (h_scale * img_w < w) {
h_scale = 0;
}
else if (w_scale * img_h < h) {
w_scale = 0;
}
if (w_scale & gt; h_scale) {
$ (id) .aimageResize ({height: 0, width: w});
}
else {
$(id).aeImageResize({ height: h, width: 0 });
}
}

id is the name of img. If CLASS=123, fill in .class. If ID is For 234, fill in #234, w is the size you want the image to be scaled to, and H is the size you want the image to be scaled to width. Then use bgResize in $(document).ready.

The background style definition is placed in the body
The background layer in the default sense is body

html,body{height:100%;}
body {
background : -moz-linear-gradient(top, #F1F1F1, #BFF08E);
background: -webkit-linear-gradient(top, #F1F1F1, #BFF08E);
}

Should not Someone will tell you to draw the background in the html tag


Alas, it’s useless. When you encounter a scroll bar, the lower body is not covered...
I’ll share it with you Okay, let’s end the post first...


Alas, it’s no use. When I encounter a scroll bar, the lower body is not covered...
I’ll share it with you. , end the post first...
body {
height:auto;
min-height:100%
}
Let’s add this to see
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn