If you have a more gorgeous picture want to do background, you can set this:
The
code is as follows: body{Background:url (img.jpg); background-position:center; background-repeat:no-repeat;} But the effect is likely to be this: pictures are not overlapping, centered, and ... She is too young to occupy all the pages.
Unfortunately, there is no picture in the CSS2 full screen stretching properties, so I think of a way.
uses a div layer to load an IMG tag inside. The DIV and IMG are then set to a size of 100% and pinned to the bottom of the screen, thus achieving the perfect stretch and maximizing the image's purpose.
first in the body to add the following code: Code as follows: <div id= "Div1" ></div& Gt then add CSS code:
div#div1{position:fixed; top:0; left:0; bottom:0; right:0; z-index:-1;} div#div1 > img {height:100%; width:100 %; border:0; Final effect: Stretch The browser, adjust the page position, the picture background picture is still centered full screen: The effect of the Fox: This, We achieved a fixed-centered and automatically stretched Full-screen background image, but she is a layer, so when the user in the margin of the page when the right button, the display is the picture information, which may make the user feel inconvenient.
In fact, Firefox's tensile effect is much stronger than IE, will automatically feather the details of the picture. IE in the image after stretching the pixel is very ugly, so it is recommended to use high-resolution images as the background.
Novice to, expert Please guide, thank you.
