Proficient CSS+DIV Web page style and layout--page background

In the previous blog, we mainly summed up the CSS image effect, we come back to tell how CSS set the background of the Web page, the background of the page is an important part of the whole page, she directly decided the whole page style and color. This blog is a simple summary of how to use CSS to set the background color, background image. First, let's look at a picture:

Then, the small series with the mind map of the context of the various points of knowledge to explain in detail, first of all, we look at the page background color, example code and run the effect is as follows:

page background color

<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >The results are as follows:

CSS settings background color is particularly simple: Background-color, the use of hexadecimal design method. Background color can not only set the background color of the Web page, but also to the page block. We'll look at the next, using the background color to block the page, the example and code are as follows:
 Use background color to block pages
<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >The results are as follows:
Analysis of the above code we can see, in the whole body using table to block, see the above display effect, here also say that, the body part we do not set the color in the code, but in Topbanner and Leftbanner set the color, So do not set the color of the inherited body, set up and then overwrite the original. Through the background color and the entire page block, can achieve a good layout effect. CSS can not only set the background color of the page, but also to add images to the background, we look at the example code and the effect of running:
 page Background map
<span style= "FONT-SIZE:18PX;" >
The results are as follows:
From the hours above the effect we see this small picture in the horizontal and vertical are covered with this page, is not very beautiful Nie, the legendary five-leaf grass, representing self-confidence and strong, hope to see this blog small partners in the new year, confident strong, no matter what difficulties encountered, are brave and fearless, We just saw a small picture of the repetition can be filled with the entire page, but if we do not want to repeat this, how should we set it? Look at the following example and code:
 Repetition of background images
<span style= "FONT-SIZE:18PX;" >
The results are as follows:
If we set the Background-repeat to Repeat-x will have what kind of surprise waiting for us NIE, small partners can do their own try, we just saw the background image of the repetition, no chaos is the x axis, or the Y axis, all from the upper left corner, if we want to change these, Let's look at the location of the background image, the example code and the effect as follows:
             The position of the background picture 
<span style= "FONT-SIZE:18PX;" >The results are as follows:
By setting the position of the background of the picture, you can make good use of some large images as the background of the entire Web page, while the text is above. We just found that the background image and the relative position of the text is fixed, followed by the picture, then how should we set the fixed background image? Let's look at the following example and how it works:
 Fixed background image
<span Style= "FONT-SIZE:18PX;" >
The results are as follows:
We see the background-attachment:fixed in the code to hold the background image, and when the text moves, the background image does not move as the picture moves.
Small Series of words: This blog, small series mainly simple summary of the settings page background related knowledge, the main page background, with the background color to the page block, page background, background image repetition, background image location and fixed background image, which uses the background color to the page block in the entire body using table to block, see as above the display effect, here also to say a little is, the body part we in the code does not give it color, but in Topbanner and Leftbanner set the color, So do not set the color of the inherited body, set up and then overwrite the original. Through the background color and the entire page block, can achieve a good layout effect. BS study not to be continued ...
Proficient CSS+DIV Web page style and layout--page background