Summary of the use of background attributes in css

backgroundThe background attribute is an important attribute in CSS. You can use the background attribute to set various styles of a background element, including setting the color of the filled background, using your own picture as the background, so that the picture will repeat horizontally and vertically until it covers the entire element, and controlling the position of the background picture in the element. etc. Using pictures as backgrounds is often encountered in a web page layout. Generally, setting the object picture as the background attribute instance first sets the background color, followed by setting the picture as the background, followed by whether the picture is repeated, and then the picture at the object position. The previous background color does not need to be set and is not required. Generally, a picture is used as the object background. If you want to set whether the picture is displayed repeatedly, the distance position will be set. The following content will specifically explain the various uses of the background background attribute.

First of all, you can learn free courses related to php Chinese website

1. Learn"CSS 0 Basic Introductory Tutorial" in CSS Background Chapter Course

##2. Watch the Background and Margin video course in "Dark Horse Programmer CSS Video Tutorial"

background background property

1.

CSS knowledge that must be mastered-background property

When we set the border for the body, we will find that the border only encloses the content in the body. But setting the background color for the body fills the entire screen.

When using an image as the background, the image is positioned with reference to the visible area of ​​the screen, not the part framed by the border.

Each parameter is separated by spaces, followed by color, picture, repetition, fixation method, and position.

2.

Background related attributes in css

Percent/length: If it is a percentage, the size of the background image is the product of the container times the percentage. Set only one, and set the second one to auto (to maintain the same aspect ratio as the original background image).

If both are set to 100%, the background image will fill the container, but the aspect ratio will change.

contain: The container contains the entire background image according to a fixed proportion of the background image. The size of the background image is enlarged by a fixed ratio based on the background image. Until any side reaches the boundary of the container, the other side will often be blank (when there is no-repeat).

cover: The background image is enlarged according to a fixed aspect ratio until it fills the entire container (the shorter side of the background image also reaches the container boundary). Part of the background image will be cut off because it exceeds the container.

3.

Detailed explanation of the background attribute of css

In the same element, the background composite attribute is written at the front, and the background attribute that needs to be set individually is written at the end; reason : The front wave of the Yangtze River pushes back the wave, and the front wave dies on the beach.

Multiple background images are added to the same element. Other background attributes can only be written separately, and composite attribute abbreviations cannot be used;

in In nested parent-child elements, it is not recommended to write attributes with the same name. Reason: When the size of the child element is greater than or equal to the size of the parent element, the style of the parent element will be overwritten by the child element;

In actual work, use more background images and less use of inserted pictures.

4.

Detailed explanation of the new background series background in CSS3

border-box: Ignore the border and start tiling directly from the starting point 0,0 of the border padding-box: Default value, ignore padding, and start tiling directly from the starting point 0,0 of padding. content-box: start tiling from the content part, and the padding position will be reserved. So padding will affect it

5. How to set the css background image and background color in the web page

CSS background here refers to setting the background properties of the object through CSS, such as setting the background through CSS in the web page. style.

Css background Background function: Set a solid color background. Background background can set the background color of the object to a solid color and set the image as the background. You can set the background of the object to a picture. If the background is a picture, you can make the picture tile repeatedly or horizontally, or fix the picture as the background of the object at any position of the object.

6. Summary sharing of CSS background attributes and CSS3 background image settings

background Set all background attributes in one statement

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

background-color Sets the background color of the element

background-image Sets the background image of the element

background- position Set the starting position of the background image

Related questions and answers

1. How to speed up the loading speed of css background images

2. Can’t background:unset be used on ios? So what do you do if you want to cancel the background color?

3. body’s background position

[Related recommendations]

1. PHP Chinese website free tutorial: 《CSS Online Manual》

2. PHP Chinese website free video tutorial: 《Learn HTML video tutorial at your fingertips》

3. PHP Chinese website free video tutorial: 《php.cn Dugu Jiujian (2)-css video tutorial》

The above is the detailed content of Summary of the use of background attributes in css. For more information, please follow other related articles on the PHP Chinese website!