Use CSS to control page backgrounds

I think we often worry about some of the more suitable for the background of their own web pages, this I think is also some, because these pictures are not too big or too small, or too messy, then there is no way to let the picture can match their own home's appetite? The answer is yes. Want to know how to come true, OK, everybody starts to follow me now, I guarantee that everyone will learn. However, I would like to "start a family" on the internet is generally divided into the "opening" (like me, just beginning to pull the relevant code from other people's homepage to change), there is in their own home with the DW or FP such as professional software production upload, so, I intend to separate two steps introduced, first for in the Internet bar "opening" Friends, and finally a brief introduction to some of the background styles made with DW4. In fact, everything is the same, but the way it is used is different. Okay, let's talk about it.

When it comes to background color and color pictures, these two I think everyone must know to join Bgcolor= "#808080" and background= "URL" right, but I will introduce here is not done, but with CSS style to do, although some trouble, But the overall cooperation is very good.

• Background Color Background-color

I think that I do not have to do more introduction, color code I think we all know, not in English instead of using the specified code to express. The default value for this is transparent (transparent color).
Example: Body{background-color:yellow}
H1{background-color: #000000}

• Background Image Background-image

Background image and background color in the HTML 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 the picture, if need to display the picture, then as long as the URL (the image address) can be added, do not display it, it is the simplest, nothing to do, because the default is None, And to add, it is in the back with this none can be.
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 it is too small, and produce a variety of pieces of repeated appearance and destroy the beauty of the entire page, want to change other pictures and inappropriate such trouble situation it. But now, everyone just use the following several CSS to control the image method, then you will not have this kind of trouble happened.

• Whether or not the picture is displayed repeatedly background-repeat

Sometimes repeated display is needed, but sometimes repeated display is a headache, now this can be very good to help you, and it can also help you control the way the picture repeats (horizontal repetition, vertical repetition and two directions are repeated), In order to achieve the repetition of these three directions as long as the bcackground-repeat after adding repeat-x (horizontal direction), repeat-y (vertical direction), repeat (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 indicate that only a background image is displayed, not repeated, this is not the default yo, the default is to repeatedly display the background picture (repeat).
Example: Body{background-image:url (' File&:///c:/windows/backgrnd. GIF '); Background-repeat:no-repeat}

• Position the image display location background-position

A background image after the above settings is often not enough, because when you use the above the non-repeating display settings, the image is only displayed in the upper left corner of the page, but not elsewhere, but if you want to appear in the middle or other places this background image, So background-position this can help you, because it is used to display the picture relative to the upper left corner of a position (that is, the default value of 0% 0%), set by two values, the middle with a space to separate. Its main values are left|center|right and top|center|bottom, or you can specify a relative position with a percentage value or a value to specify an absolute position, such as 50% where the position is in the center, The horizontal value of 50px indicates the horizontal movement of the image from the upper-left corner of the 50px units; In particular, 1 when you set a value to provide only one value, it is equivalent to only specify the horizontal position, the vertical is automatically set to 50%;2 when you set the value is negative, it means that the background picture is out of bounds.
Example: Body{background-image:url (' File&:///c:/windows/backgrnd. GIF '); background-repeat:no-repeat;background-position:100px 10px}

• Controls whether the picture scrolls background-attachment

The above two steps can help you to complete the positioning of the image, but this is not perfect after this, because if your page has a scroll bar, then you this background picture 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 scrolling, Then background-attachment can help you. You just need to join scroll (stationary) and one of the fixed (scrolling). Of course not let you add, after all, scroll is the default, that is, do not let the picture with the content of the page scrolling.
Example: Body{background-image:url (' File&:///c:/windows/backgrnd. GIF '); background-repeat:no-repeat;background-attachment:fixed}

Well, after these settings, I believe your background will be more beautiful, but too much code is often very poor readability, easy to make mistakes, so here I would like to tell you that the above code can be all added together to use, that is, the above related code added to background. Add the code to the background in the middle of each value with a space to separate, and do not put the background color code behind the URL of the background image, so as not to display the picture.
Example: Body{background:green url (' File&:///c:/windows/backgrnd. GIF ') fixed 100px 50px no-repeat}

Finally remind everyone, if the code is inserted directly, then you must put the following code in the back and then put in between to normal display!

The above is to use CSS to control the content of the page background, more relevant articles please pay attention to topic.alibabacloud.com (www.php.cn)!

