CSS layout password 04

CSS background control

Background Color

AvailableBackground-colorSet the background color for the element. This property accepts any valid color value.

This rule sets the background of an 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;}
 

You can set the background color for all elements, including the body to the row elements such as Em and.
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.

Background Image
To put the image into the background, you need to useBackground-ImageAttribute. 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);} 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 );}
Theoretically, images can even be applied to the background of elements such as textareas and select, but not all user agents can handle this situation well.

In addition, background-image cannot be inherited. In fact, all background attributes cannot be inherited.

Duplicate background
To tile the background image on the page, you can use the background-repeat attribute.

Attribute Value repeat causes the image to be tiled horizontally and vertically, just as the background image is typically used. Repeat-X and repeat-y lead to duplicate images in the horizontal or vertical directions, respectively. No-repeat allows tiled images in any direction.

By default, the background image starts from the upper left corner of an element. See the following example:

Body
{  
Background-Image : URL (/I/eg_bg_03.gif) ;
Background-repeat : Repeat-y ;
}

 

Background 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. With this attribute, you can declare that the image is fixed (fixed) relative to the visible area, so it will not be affected by scrolling:

Body
{
Background-Image : URL (/I/eg_bg_02.gif) ;
Background-repeat : No-repeat ;
Background-Attachment : Fixed
}

The default value of the background-attachment attribute is scroll. That is to say, the background will scroll with the document by default.

 

Background
You can use the background-position attribute to change the position of an image in the background.

The following example places a background image in the center of the body element:

Body
{  
Background-Image : URL ('/I/eg_bg_03.gif ') ;
Background-repeat : No-repeat ;
Background-Position : Center ;
}

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.

Keywords
The keyword of image placement is the easiest to understand, and its function is indicated by its name. For example, top right places the image in the upper right corner of the element padding area.

According to the specification, the location keyword can appear in any order, as long as there are no more than two keywords-one corresponding to the horizontal direction, the other object vertical direction.

If only one keyword is displayed, the other keyword is considered as center.

Therefore, if you want an image above the middle of each section, you only need to declare the following:

P
{  
Background-Image : Url('bgimg.gif ') ;
Background-repeat : No-repeat ;
Background-Position : Top ;
}

The following are equivalent location keywords:

Keyword equivalent to a single keyword
Center
Top top center or center top
Bottom bottom center or center bottom
Right right center or center right
Left left center or center left

Percentage value
The expression of the percentage value is more complex. Assuming that you want to center the image in its element with a percentage value, it is easy

Body
{  
Background-Image : URL ('/I/eg_bg_03.gif ') ;
Background-repeat : No-repeat ;
Background-Position : 50% 50% ;
}

This causes the image to be placed properly, and its center is aligned with the center of its element. In other words, the percentage value is applied to both elements and images. That is to say, the point (center point) described as 50% 50% in the image is aligned with the point (center point) described as 50% 50% in the element.

If the image is at 0% 0%, the upper left corner is placed in the upper left corner of the element padding area. If the image position is 100%, the lower right corner of the image will be placed in the lower right corner of the right corner.

Therefore, if you want to place an image at 2/3 in the horizontal direction and 1/3 in the vertical direction, you can declare it as follows:

Body
{  
Background-Image : URL ('/I/eg_bg_03.gif ') ;
Background-repeat : No-repeat ;
Background-Position : 66% 33% ;
}

If only one percentage value is provided, the provided value is used as a horizontal value, and the vertical value is assumed to be 50%. This is similar to the keyword.

The default value of background-position is 0% 0%, Which is functionally equivalent to top left. This explains why the background image is always tiled from the upper left corner of the element's padding, unless you have set different position values.

Length Value
The Length Value refers to the offset in the upper left corner of the element's padding area. The offset is the upper left corner of the image.

For example, if the value is set to 50px 100px, the upper left corner of the image will be 50 pixels to the right in the upper left corner of the element padding area, and 100 pixels down.

Body
{  
Background-Image : URL ('/I/eg_bg_03.gif ') ;
Background-repeat : No-repeat ;
Background-Position : 50px 100px ;
}

Note that this is different from the percentage value, because the offset is only from the upper left corner to the other upper left corner. That is to say, the upper left corner of the image is aligned with the specified point in the background-position declaration.