The ability to stretch the background image to the full width of the browser window using CSS only appeared with the release of its latest specification - CSS3. Unfortunately, so far a large number of web surfers are using earlier versions of browsers that do not understand the CSS3 specification. Therefore, you have to make a choice - either use a less convenient, but cross-browser solution, or a high-tech solution, but for a limited audience. Let's consider both options.
Necessary
Basic knowledge of HTML and CSS
Instructions
Step 1
The first option is based on earlier specifications of the CSS language. You need to create an HTML code structure that has two overlapping layers, one above the other. Layers (div) can be stretched to the width of the screen in the old cascading style description language specification. In the bottom of the layers you need to place the background image, and in the top one will be placed all the content of the page. Such a structure in the body of the document might look like this:
This will be the content of the page
And in the heading part it is necessary to put a description of the styles for this structure. For example, this:
html, body {
margin: 0px;
height: 100%;
}
#background {
position: absolute;
width: 100%;
height: 100%;
}
#body {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
Here, the layers with IDs background (this is your background image) and body (this is the layer for the page content) are set to absolute positioning and 100% width and height. In addition, the content layer is assigned a serial number z-index = 2. It determines the "depth" of the layers - the larger it is, the further from the "bottom" this layer is located. In our case, it will be above the background layer, which uses the default z-index.
Step 2
The complete code might look like this:
html, body {
margin: 0px;
height: 100%;
}
#background {
position: absolute;
width: 100%;
height: 100%;
}
#body {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
This will be the content of the page
Don't forget to replace the background image file name fon.png.
Step 3
The second option will use the background-size property introduced in CSS3. At the same time, add similar properties to the style definitions that were previously used by the browsers Mozilla Firefox, Google Chrome and Opera. The style description block in this version may look like this:
html {
background: url (fon.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
And don't forget to replace the background image file name fon.png"
