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
Release: 2016-06-24 11:50:27
Original
1094 people have browsed it


Why can’t the background fill the screen? ?


Reply to discussion (solution)

html,body{height:100%;}

html,body{height:100%;}



div2000px height? Why can’t the background fill the entire screen?

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>
Copy after login

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/>
Copy after login


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:

///The outside must contain a DIV, and the DIV attribute must be set to overflow:hidden
///h is the actual width of the image, w is the actual length of the image


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
Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template