CSS allows the application of solid color (background-color) as the background, and allows the use of background-image to create quite complex effects. CSS is far above HTML.
I. background color
You can use the background-color attribute to set the background color for the element. This property accepts any valid color value. You can set the background color for all elements, including the body to the row elements such as Em and. For example, the following rule sets the background of the <p> </P> element to Gray:
p {background-color: gray;}
If you want to extend the background color from the text in the element to a few places, you only need to add some padding:
p {background-color: gray; padding: 20px;}
Background-color cannot be inherited. The default value is transparent. Transparent is transparent. That is to say, if a background color is not specified for an element, the background is transparent so that the background of the ancestor element can be visible.
Example of background color:
<HTML>Ii. Background Image
1. Basic syntax
To set a background image for an element, you must use the background-image attribute. The default value of the background-image attribute is none, indicating that no image is placed on the background. To set a background image, you must set a URL value for this attribute:body {background-image: url(/i/eg_bg_04.gif);}The background-image attribute of an element cannot be inherited. In fact, all background attributes cannot be inherited.
2. Application Scope of background images
Most backgrounds are applied to the body element, but not limited to this. The following example illustrates how to apply a background to a section without applying background to other sections of the document:p.flower {background-image: url(/i/eg_bg_03.gif);}You can even set a background image for the line element. The following example sets a background image for a link:
a.radio {background-image: url(/i/eg_bg_07.gif);}3. Duplicate background images
To tile the background image on the page, you can use the background-repeat attribute. Background-repeat attribute value: Repeat causes the image to be tiled horizontally and vertically. Repeat-X and repeat-y cause the image to be repeated horizontally or vertically, respectively, no-repeat is not allowed to tile images in any direction.
By default, the background image starts from the upper left corner of an element. See the following example:
/* Set a vertical tiled background image for the body element */body {background-image: URL (/I/eg_bg_03.gif); background-repeat: Repeat-y ;}4. Background Image Positioning
You can use the background-position attribute to change the position of an image in the background. There are many methods to provide values for the background-position attribute. First, you can use some keywords: top, bottom, left, right, and center. These keywords are usually paired, but they are not always the same. You can also use a length value, such as 100px or 5 cm, or a percentage value. The placement of different types of values varies slightly with the background image. The following example places a background image in the center of the body element:
/* Set a background image that is not tiled and centered for the body */body {background-image: URL ('/I/eg_bg_03.gif'); background-repeat: No-Repeat; background-position: center ;}5. Background Image Association
If the document is long, the background image will also scroll as the document rolls down. The image disappears when the document rolls to a position that exceeds the image. You can use the background-attachment attribute to prevent such scrolling. The default value of the background-attachment attribute is scroll. That is to say, the background will scroll with the document by default. By changing the value of this attribute, you can declare that the image is fixed (fixed) relative to the visible area, so it will not be affected by scrolling:
/* Set a fixed background for the body */body {background-image: URL (/I/eg_bg_02.gif); background-repeat: No-Repeat; Background-Attachment: Fixed}Iii. Background attributes
You can set all background attributes in a declaration using the background short attribute.
You can set the following attributes in sequence:
• Background-color
• Background-Image
• Background-repeat
• Background-Attachment
• Background-Position
If you do not set a value, there will be no problems, such as background: # ff0000 url('smiley.gif '); is also allowed. We recommend that you use this attribute instead of a single attribute, because this attribute can be better supported in older browsers and requires fewer letters./* Set all background attributes in a declaration using the shorthand attribute */body {Background: # ff0000 URL (/I/eg_bg_03.gif) No-repeat fixed center ;}Reference: http://www.w3school.com.cn/css/pr_background.asp
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
