CSS background attribute note

ArticleDirectory

• Element background range

Set all background attributes in a declaration.

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.

 

Instance

How to Set all background attributes in a declaration:

  Body
{ 
Background:#00ff00 url(bgimage.gif) No-repeat fixed top;
}
 
 

Background-colorAttribute sets the background color of the element.

Element background range

The background-color attribute sets a solid color for the element. This color fills in the content, inner margin, and border area of the element and extends to the outer border of the element border (but does not include the outer margin ). If the border has a transparent part (such as a dotted border), the background color is displayed through these transparent parts.

 

Border and background

CSS rules indicate that borders are drawn on the "background of elements ". This is important because some borders are "broken" (for example, dotted border or dotted box), and the background of the element should appear between the visible parts of the border.

Css2 indicates that the background only extends to the padding, not the border. Later, css2.1 corrected the following: the background of the element is the background of the content, padding, and border area. Most browsers follow the definition of css2.1, but some older browsers may have different performances.

 

Transparent Value

Although in most cases, it is not necessary to use transparent. However, if you do not want an element to have a background color, and you do not want the browser color settings to affect your design, it is necessary to set the transparent value.

 

Possible Value

Value	Description
Color_name	Specifies the background color (such as red) of the color name ).
Hex_number	Specifies the background color of the hexadecimal value (for example, # ff0000 ).
Rgb_number	The specified color value is RGB.CodeBackground color (such as RGB (, 0 )).
Transparent	Default value. The background color is transparent.

 

Background-ImageSet the background image for the element.

The background of an element occupies all the sizes of the element, including the padding and border, but not the padding.

By default, the background image is located in the upper left corner of the element and repeats horizontally and vertically.

Tip:Set an available background color. In this way, if the background image is not available, the page can also obtain good visual effects.

 

 

Background-repeat Set whether and how to repeat the background image.

By default, the background image repeats horizontally and vertically.

Tip:The position of the background image is set based on the background-position attribute. If the background-position attribute is not specified, the image is placed in the upper left corner of the element.

 

Possible Value

Value	Description
Repeat	Default value. The background image will be repeated in the vertical and horizontal directions.
Repeat-x	The background image will be repeated in the horizontal direction.
Repeat-y	The background image will be repeated in the vertical direction.
No-repeat	The background image is displayed only once.

 

Background-AttachmentProperty to set whether the background image is fixed or scrolled with the rest of the page.

 

Possible Value

Value	Description
Scroll	Default value. The background image will move along with the rest of the page.
Fixed	When the rest of the page is rolled, the background image is not moved.

 

 

Background-PositionAttribute to set the start position of the background image.

This attribute sets the original background image.The position of the background image.

Tip:You must set the background-attachment attribute to "fixed" to ensure that this attribute works properly in Firefox and opera.

 

Possible Value

Value	Description
Top left Top center Top right Center left Center Center right Bottom left Bottom center Bottom right	If you specify only one keyword, the second value is "center ". Default Value: 0% 0%.
X % Y %	The first value is the horizontal position, and the second value is the vertical position. The top left corner is 0% 0%. The bottom right corner is 100% 100%. If you specify only one value, the other value is 50%.
Xpos ypos	The first value is the horizontal position, and the second value is the vertical position. The upper left corner is 0 0. The Unit is pixel (0px 0px) or any other CSS unit. If you specify only one value, the other value is 50%. You can use both the % and position values.