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

The css background attribute is used to define the background of HTML elements. So, what are the css background attributes? For example, css background color attributes and css image background attributes all belong to css background attributes. This article will summarize the relevant attributes in css background attributes.

First, let’s take a look at the css-related properties:

• ##background-color: css sets the background color

• background-image: css to set the image background

• background-repeat: css to set whether the background image is repeated and how to repeat it

• background-position: css sets the position of the background image

• background-attachment: whether the background image is fixed or scrolls with the rest of the page

• background: Abbreviation attribute, the function is to set the background attribute in a statement

Range of element background:

The background fills the element's content, padding, and border areas, extending to the outer edges of the element's border (but not the margins). If the border has transparent parts (such as a dotted border), the background color will show through these transparent parts.

Browser support:

The background attribute is supported by all major browsers.

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

css background color:

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

body {background-color: #b0c4de;}

In CSS, color values ​​are usually defined in the following way:

• Hex - such as: #ff0000

• RGB - For example: rgb(255,0,0)

• Color name - For example: red

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

• inherit Inherit the background color from the parent element. This has compatibility issues on IE.

css image background:

The background-image attribute is used to define the background image of the element.

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

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

Tips: Background color and background image can coexist, please set an available background color, so that if the background image is not available, the page can also get good visuals Effect.

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

Attribute value:

• none - default no background image

• url('image path') - image Accessible path, you can use 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 attribute.

body {
    background-image: url('gradient2.png');
    background-repeat: repeat-x;
}

Attribute value:

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

• repeat-x and repeat-y make the background image repeat only in the horizontal or vertical direction respectively.

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

• inherit Inherit from the parent element.

css background positioning:

The background-position property is used to control the position of the background image, usually in conjunction 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, there are some keywords you can use: top, bottom, left, right, and center. Typically, these keywords will appear in pairs, but that's not always the case. You can also use a length value like 100px and finally a percentage value.

Keywords:

Image placement keywords are the easiest to understand and work just as their names suggest. For example, top right places the image in the upper right corner of the element's padding area.

According to the specification, position keywords can appear in any order, as long as there are no more than two keywords, one corresponding to the horizontal direction and the other corresponding to the vertical direction. top right and right top are equivalent.

If only one keyword appears, the other keyword is considered center.

Percentage:

Percentage values ​​are expressed in a more complex way. Let's say you want to center an image within its element using 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 top left corner will be placed in the top left corner of the element's padding area. If the image position is 100% 100% will place the lower right corner of the image at the lower right corner of the right margin.

Place an image 2/3 horizontally and 1/3 vertically:

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

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

Length value:

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

比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上。

css背景固定：

background-attachment 属性设置背景图片是否固定或随页面的其余部分滚动。

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

属性值：

• scroll 默认。背景图像会随着页面其余部分的滚动而移动。

• fixed 当页面的其余部分滚动时，背景图像不会移动。

• inherit 从父元素继承。

简写属性：

background 属性在一个声明中设置所有背景属性。

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

如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif'); 也是允许的。

通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

相关文章推荐：

你不知道的CSS背景—css背景属性全解

详解css之背景background属性

The above is the detailed content of What are the CSS background properties? Summary of css background properties (with code). For more information, please follow other related articles on the PHP Chinese website!