The use of CSS background background property

The background (background) is an important part of CSS and one of the basics of CSS that needs to be known. This article will cover the basic usage of the CSS background (background), including properties such as Background-attachment, as well as common techniques for background (background), and background in CSS3 (background) ( Contains 4 new background (background) attributes).

Background color

You can use the Background-color property to set the background color for an element. This property accepts any valid color value.

This rule sets the background of the element to Gray:

p {background-color:gray;}

If you want the background color to have a little extension from the text in the element, just add some padding:

p {background-color:gray; padding:20px;}

You can set the background color for all elements, which includes the body all the time to the inside of an EM and a line element.

Background-color cannot inherit, its default value is transparent. Transparent has the meaning of "transparency". That is, if an element does not specify a background color, the background is transparent so that the background of its ancestor elements can be visible.

Background image

To put the image into the background, you need to use the Background-image property. The default value of the Background-image property is None, indicating that no image is placed on the background.

If you need to set a background image, you must set a URL value for this property:

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 applies a background to a paragraph without applying a background to other parts of the document:

P.flower {background-image:url (/i/eg_bg_03.gif);}

You can even set a background image for an inline element, and the following example sets a background image for a link:

A.radio {background-image:url (/i/eg_bg_07.gif);}

In theory, you can even apply an image to the background of a replacement element such as Textareas and select, but not all user agents can handle the situation well.

It is also important to add that background-image cannot inherit. In fact, all background properties cannot be inherited.

Repeat background

If you need to tile a background image on a page, you can use the Background-repeat property.

The property value repeat causes the image to be tiled horizontally vertically, just as usual with previous background images. Repeat-x and repeat-y respectively cause the image to repeat only horizontally or vertically, and no-repeat does not allow the image to be tiled in any direction.

By default, the background image starts from the upper-left corner of an element. Take a look at the following example:

body{Background-image:url (/i/eg_bg_03.gif); background-repeat:repeat-y;}

Background positioning

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

The following example centers a background image in the BODY element:

body{background-image:url ('/i/eg_bg_03.gif '); background-repeat:no-repeat;background-position:center;}

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 or 5cm, and finally you can use a percentage value. Different types of values have slightly different placement for background images.

What does background mean,

1. Background (relative to foreground foreground) [C]
2. (event, etc) background, remote cause [C][u]
3. Background, (including qualifications) experience [C][u]
4. [C]
5. Background information [U]
6. Hidden Place, behind the scenes [the S]
7. (Interference in recording or radio) noise [u]
8. Background music [u]