Learning Web making: Using CSS to control the background of a Web page

css| Control | Web page background

I think we often for some more suitable for their own web page background picture and worry about it, this I think there is, because these pictures are not too big or too small, or too messy, then there is no way to let the picture to be able to match their home page's appetite? The answer is yes.

Want to know how to achieve it, OK, everyone now start following me, I promise you will learn. However, I want to "get married" friends on the Internet is generally divided into "opening" in the Internet café (just like me, just start from other people's homepage to pull related code to change, there is in their own home with DW or FP and other professional software to make good upload, so, I intend to separate two steps introduced, first of all in the Internet café "opening" Friends, and finally briefly introduce some of the background style with DW4.

In fact, everything is the same, but the way to use it is different. All right, let's talk less, now get down to business.

Speaking of background and only background color and color pictures, these two I think we must all know to add bgcolor= "#808080" and background= "URL" right, but I will introduce this is not done, but with CSS style to do, although some trouble, But the overall co-ordination is still very good.

　　• Background color Background-color

I think this I don't have to do more introduction, color code I think we all know, not in English to replace is to use the specified code to express. The default value for this is transparent (transparent color).

Example: Body{background-color:yellow}

H1{background-color: #000000}

　　• Background picture Background-image

Background image and background color in the HTML inside the settings are basically the same, can be added to the relevant statements to complete. But here, I am not referring to this method, I use the method or CSS. Background-image This main function is also used to display pictures, if you need to display pictures, then as long as the following URL (image address) on it, do not show it, it is the simplest, nothing on the line, because the default is None, And to add the words, is to add this after the none on it.

Example: Body{background-image:url (' File&:///c:/windows/backgrnd. GIF ')}
H1{background-image:url (' None ')}

Everyone in the use of the background picture, must often encounter some pictures because too small, and produce all sorts of pictures such as repeated appearance and destroy the whole page of beauty, want to replace other pictures and the wrong kind of trouble. But now, everyone just use the following CSS to control the image method, then you will not have this kind of trouble happen again.

　　• Does the picture repeat the display background-repeat

Sometimes repeated display is needed, but sometimes repeated display is a headache, now this can help you very well, and it can also help you control the way the picture repeats (horizontal repeat, vertical direction repeat and two directions are repeated), And to achieve these three directions of repetition as long as in the back of the Bcackground-repeat plus repeat-x (horizontal direction), repeat-y (vertical spread), repeat (spread out in two directions).

Of course, it can control the repetition of the picture, also can control the picture does not repeat. No-repeat This is used to show only a background picture, rather than repeating, this is not the default yo, the default is to repeat the background picture (repeat).

Example: Body{background-image:url (' File&:///c:/windows/backgrnd. GIF '); background-repeat:no-repeat} 

• Position picture display position  background-position  

A background picture is often not enough after you set it up, because when you use the above display settings, the picture is displayed only in the upper left corner of the page, not elsewhere, but if you want the background image to appear in the middle or elsewhere, So background-position this can help you, because it is used to show the picture relative to the upper left corner of a position (that is, the default value 0% 0%), set by two values, the middle with a space to separate. &NBSP

Its main values are left center right and top center bottom, or you can specify a relative position with a percentage value or specify an absolute position with a value, such as 50% indicates that the position is in the center, The horizontal value of 50px indicates that the image moves 50px units horizontally from the upper left corner. In particular, 1 when you set a value to provide only a value, it is equivalent to specifying only the horizontal position, the vertical automatically set to 50%;2 when you set the value is negative, then the background picture beyond the bounds.

Example: Body{background-image:url (' File&:///c:/windows/backgrnd. GIF '); background-repeat:no-repeat;background-position:100px 10px}

　　• Control whether the picture scrolls Background-attachment

The two steps above will help you to locate the image, but this is not perfect, because if your page has a scroll bar, then you this background image will not always be positioned in that position, if you want the picture always positioned in that position, only let this picture with the content of the page scrolling and rolling, Then background-attachment can help you. Just join one of the scroll (stationary) and fixed (scrolling).

Of course not let you disorderly add, after all, scroll is the default, that is, do not let the picture with the content of the page and scrolling.

Example: Body{background-image:url (' File&:///c:/windows/backgrnd. GIF '); background-repeat:no-repeat;background-attachment:fixed}

Well, after this setup, I believe your background will be more beautiful, but too much code is often very poor readability, easy to make mistakes, so I want to tell you here is that you can add all the above code together, that is to add the relevant code to the background.

Add the code to the background by adding a space between each value, and do not place the background color code behind the URL of the background image to prevent the picture from appearing.

Example: Body{background:green url (' File&:///c:/windows/backgrnd. GIF ') fixed 100px 50px no-repeat}

Finally remind you, if the code directly inserted, then must put the following code in the inside and then between the normal display out!