What are the CSS background properties? Summary of CSS Background properties (with code)

CSS background properties are used to define the background of HTML elements, so what are the CSS background properties? Like CSS background color properties, CSS image background properties are CSS background properties, this article will give you a summary of CSS background properties related properties.

First, let's look at CSS-related properties:

• BACKGROUND-COLOR:CSS Setting the background color

• Background-image:css Setting the picture background

• BACKGROUND-REPEAT:CSS set whether the background picture repeats and how to repeat

• Background-position:css Setting the location of the background image

• Background-attachment: Whether the background image is fixed or scrolled along with the rest of the page

• Background: Shorthand property, which sets the background property in a declaration

The range of element backgrounds:

The background fills the element's contents, padding, and border areas, extending to the outer bounds of the element's border (but excluding margins). If the border has a transparent part (such as a dashed border), the background color is displayed through these transparent sections.

Browser support:

Background properties are supported for all major browsers.

Note: IE7 and earlier versions do not support "inherited" values ( inherit ). IE8 needs to be defined !DOCTYPE . IE9 supports "inheritance".

CSS background color:

background-colorproperty is used to define the background color of the element.

Body {background-color: #b0c4de;}

In CSS, color values are typically defined in the following ways:

• Hex-such as: #ff0000

• RGB-for example: RGB (255,0,0)

• Color names-such as: red

• Default-transparent, the meaning of transparency. If an element does not specify a background color, the background is transparent.

• Inherit inherits the background color from the parent element, which has a compatibility problem on IE.

CSS Picture background:

The Background-image property is used to define the background picture of the element.

By default, the background picture is in the upper-left corner of the element and repeats in both horizontal and vertical directions.

Body {background-image:url (' paper.gif ');}

tip: background color and background picture can coexist, please set a usable background color, so that if the background image is not available, the page can also get good visual effect.

Body {background-image:url (' paper.gif '); Background-color: #fff;}

Property value:

• None-default no background picture

• URL (' Image path ')-an accessible path to the image, which can use the network address, relative path address, absolute path address

• Inherit-Inherit from parent element

CSS Background repeat:

If you need to tile the background, you can use the Background-repeat property.

Body {    Background-image:url (' gradient2.png ');    Background-repeat:repeat-x;}

Property value:

• Repeat causes the image to be tiled horizontally vertically, by default.

• Repeat-x and repeat-y respectively make the background image repeat horizontally or vertically.

• No-repeat does not allow the image to be tiled in any direction.

• Inherit inherits from the parent element.

CSS background positioning:

The Background-position property is used to control the position of the background picture, generally with background-repeat:no-repeat; Use.

Body {    Background-image:url (' img_tree.png ');    Background-repeat:no-repeat;    Background-position:right top;}

There are many ways to provide a value for the Background-position property. First, you can use some keywords: top, bottom, left, right, and center. Usually, these keywords will appear in pairs, but not always. You can also use length values, such as 100px, and finally you can use a percentage value.

Keywords:

The image placement keyword is easiest to understand, and its role is as indicated by its name. For example, top right causes the image to be placed in the upper-left corner of the element's inner margin area.

According to the specification, the Location keyword can appear in any order, as long as the guarantee of no more than two keywords, one corresponding to the horizontal direction, the other corresponding to the vertical direction, top right and top is equivalent.

If only one keyword appears, another keyword is considered center.

Percentage:

Percentage values are more complex to behave. Suppose you want to center an image in its element with a percentage value:

Body {     Background-image:url ('/eg_bg_03.gif ');    Background-repeat:no-repeat;    background-position:50% 50%;}

If the image is at 0% 0%, its upper-left corner is placed in the upper-left corner of the element's inner margin area. If the image position is 100% 100%, the lower-right corner of the image is placed in the lower-right corner of the right margin.

Place an image in horizontal direction 2/3, vertical direction 1/3:

Body {     Background-image:url ('/eg_bg_03.gif ');    Background-repeat:no-repeat;    background-position:66% 33%;}

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

Length value:

The length value interprets the offset of the upper-left corner of the element's inner margin. The offset point is the upper-left corner of the image.

For example, if you set a value of 50px 100px, the upper-left corner of the image will be 50 pixels to the right and 100 pixels down in the upper-left corner of the element's inner margin area.

CSS background pinning:

The Background-attachment property sets whether the background picture is fixed or scrolled with the rest of the page.

Body {    Background-image:url (' image.png ');    Background-repeat:no-repeat;    background-attachment:fixed;}

Property value:

• Scroll default. The background image moves as you scroll through the rest of the page.

• Fixed the background image does not move when the rest of the page scrolls.

• Inherit inherits from the parent element.

Shorthand property:

The Background property sets all background properties in a declaration.

Body {     background: #00FF00 url (' bgimage.gif ') no-repeat fixed top;}

If you do not set one of these values, there will be no problem, such as background: #ff0000 URL (' smiley.gif '); is also allowed.

It is generally recommended that you use this property instead of using a single property, because this property is better supported in older browsers and requires fewer letters to be typed.

Related articles recommended:

You don't know the full solution of CSS background-css Background property

Detailed CSS background background properties