Background color background-color
I don't need to introduce the color code any more. What I want everyone to know is that the color code is represented either in English or by the specified code. The default value is transparent (transparent ).
Example: body {background-color: yellow}
H1 {back ground-color: #000000}
Background image background-image
The settings of background images and background colors in HTML are also basically the same. You can add related statements to the settings. But here, I am not referring to this method. I am still using CSS. The main function of background-image is to display images. If you want to display images, you only need to add a url (image address) to the image, that's the easiest thing to do. Just do nothing, because the default value is none. If you want to add it, you can add this none.
Example:
Body {background-image: url (file &: // C:/WINDOWS/BACKGRND. GIF )}
H1 {background-image: url (none )}
When you are using background images, you will often encounter images that are too small to repeat, which damages the aesthetic of the entire page, it may be difficult to change to another image. But now, as long as you use the following CSS to control the image method, you will not have such troubles in the future.
Whether the image is repeatedly displayed as background-repeat
Sometimes Repeated display is needed, but sometimes repeated display is a headache. Now it can help you well, in addition, it can also help you control how images are repeated (horizontal, vertical, and both ), to achieve the repetition of these three directions, you only need to add repeat-x (horizontal) and repeat-y (vertical) after bcackground-repeat) and repeat ). Of course, it can control the repetition of images or the non-repetition of images. No-repeat indicates that only one background image is displayed, rather than a duplicate image. This is not the default one. The default one is repeat ).
Example:
Body {background-image: url (file &: // C:/WINDOWS/BACKGRND. GIF); background-repeat: no-repeat}
Locate the image display position background-position
It is often not enough for a background image to pass through the above settings, because when you use the above non-repeated display settings, the image is only displayed in the upper left corner of the page, rather than in other places, however, if you want to see this background image in the middle or other places, the background-position will help you, it is used to display the position of the image relative to the upper left corner (that is, the default value is 0%). It is set by two values, separated by spaces. Its main values include left | center | right and top | center | bottom. You can also use the percentage value to specify the relative position or use a value to specify the absolute position, for example, 50% indicates that the position is in the center, while the horizontal value of 50px indicates that the image is horizontally moved to 50px units from the area in the upper left corner, 1. When you set a value, only one value is provided, which is equivalent to specifying only the horizontal position. The vertical value is automatically set to 50%. 2. When you set a negative value, the background image exceeds the boundary.