Div Css controls the horizontal and vertical centering of background images_html/css_WEB-ITnose

In web development, we often encounter this problem: after setting a background image for a page, we often hope that the image can be displayed in the center horizontally and vertically at a relatively large resolution. Usually horizontal centering is easy to achieve in CSS, but vertical centering requires the use of some CSS techniques:

1. First, in order to make the website adapt to the browser size, we need to change the page The height value of the body element is set to 100%, but before that, we need to remove the xhtml validation from the website header.

Then add the following css file to the page to set the height of the body to 100% and the html element to be compatible with FF:

2. Needed later Set the outermost div element to 100% height and width:

3. Apply another div in the outer div and make it 50% from the top of the page:

4. Next, place the div element we need to set the background image in the inner div element, And set the css properties as follows:

.login_background
{
height:600px;
width:1000px;
background-image:url(images/login_background.png);
background-repeat:no-repeat;
background-position:center center;
margin:0px auto;
position:relative;
top:-50%;
left:-50 %;
}

In this way, the size of the page will be able to adapt according to different browsers, and the background image can also be displayed vertically and horizontally centered.

It has been tested that it works in F11 mode under IE8.