How to make CSS control the background of Web page design?

css| Control | design | Web page background | Web Design

How to use CSS to control the background of a Web page in accordance with standard Web design? Some questions, including background colors, background pictures, and more, are made clear in this tutorial.

• 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.

Cases:
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).

Cases:

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

• Positioning picture Display location Background-position

A background picture is usually not enough after the setting above, because when you use the above display settings, the picture only appears 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 picture, So background-position this can help you, because it is used to show the picture relative to the top 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% 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.

Cases:
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.

Cases:
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!

Next I introduce the use of DW4 to make the above style, because in the DW has been very detailed list of the various, the specific role I also explained, so a brief introduction, as long as we can understand on the line.

1. Before this, you should put the CSS styles this window open, if not open, then press SHIFT+F11 or from the Window drop-down menu to select this.

2. Right-click to choose New Style ... This option or click on the icon with the + sign below.

3. In the pop-up window selection as follows, tag select body because we described above CSS style is about the body, and here I just introduce this inside of the background, other do not introduce content; The following type selects the second Define also choose a second one, so you can find one in the file later, and that's what I described above. Oh, ~_^.

4. Click OK after the pop-up window is the most important. As I've said before, we're mainly introducing the background option, so select it in the next window. Select the right window will become related to the settings, the specific I introduced above, you can only refer to the above introduction will be completed. But the bottom two items in this window are actually the horizontal vertical direction in the background-position.

5. Click OK at the end to complete. When you're done, you can find them in the page's Code (view Code option).