Home > Developer > Web Develop
We often encounter this problem in Web development: After setting a background image for a page, it is often desirable that the image be centered horizontally and vertically in the case of a relatively large resolution. It is often easy to center horizontally in CSS, and vertical centering requires the use of some CSS techniques:
1. First, in order to enable the Web site to adapt according to the size of the browser, we need to set the body height value of the page to 100%, and before that, we need to remove the XHTML validation from the site header.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
After adding the following CSS file on the page set the body height for the 100%,html element is set to compatible with FF:
<style type= "Text/css" >
HTML, Body
{
margin:0px;
height:100%;
}
</style>
2. After that, you need to set the outermost div element to 100% height and width:
<div style= "height:100%; width:100%; Text-align:center; " >
</div>
3. Apply a layer div to the outer div and make it 50% from the top of the page:
<div style= "margin:0px auto;+position:absolute; top:50%; " >
</div>
4. Next, place the DIV element where you want 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%;
}
This way the size of the page will be able to adapt to different browsers, while the background image can be vertical and horizontal center display.
Tested under IE8 F11 mode is effective.
============== situation two ===========
1, if the landlord just as a picture display, you can control through CSS, such as img{width:100%;height:100%;}. Otherwise you need to use it as a Web page background, you can try the following methods: 2, if this picture is a background picture because the background picture is not scalable, can only be solved by other methods, in IE can use <body style= "Filter:progid: Dximagetransform.microsoft.alphaimageloader (src= ' 1.jpg ', sizingmethod= ' scale '), the background stretch is spread over the entire browser, but other browsers do not. At this point you can turn a corner, set a two-level div, the bottom div as the background to use, put a picture can be. <div id= "Background" style= "position:absolute;z-index:-1;width:100%;height:100%;top:0px;left:0px;" ></div> then put the page content on the second level <div id= "content" > page content </ Content> 3, page background picture by default, tiles are repeated over the entire page. The above 2 method requires that the picture is not duplicated, but it has to be filled with the method used by the browser.Turn div+css control background Image Horizontal Vertical Center display background Full screen
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
