During the front-end development process, background images are often added to HTML pages for the sake of page beauty. So how to use css to set an image as the background in html? This article will introduce to you how to set a background image in CSS. Friends who need it can refer to it and learn it. I hope it will be helpful to you.
1. Background overview
CSS can add background colors and background images, as well as image settings.
The css background attribute is a property that specifically sets the background. You can set the background color or background image.
2. Attributes
1. background-color
(1) Definition and usage: The background-color attribute sets the background color of the element
(2) Range of element background
The background-color property sets a solid color for the element. This color fills the element's content, padding, and border areas, extending to the outer bounds 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.
(3) transparent value
Although in most cases, using transparent is not necessary. However, if you don't want an element to have a background color, and you don't want the user's browser color settings to affect your design, then setting the transparent value is still necessary.
Use background-color to set the background color for an element:
<!DOCTYPEhtml><html><head><title>CSS background</title><style>#bg{color:white;background-color:blue;margin:20px;/*Set the outer margin to 20px*/padding: 20 px;/*Set the padding to 20px*/border:10pxdottedyellow;/*Set a 10px wide yellow dotted border*/}</style></head><body><pid=bg>background-color attribute< /p></body></html>The display results are as follows:
From the running results, we can see that the background-color attribute can set a solid color background for the element. This color will fill the content, padding and border area of the element (it can also be understood as the border and all areas within it). For the element Areas outside the border (margins) have no effect.
2. background-image sets the background image
background-image:url(imgs/main_bg.jpg),
If the property is set in the css file and the image is not in the css folder, then add the path in front of it to return to the previous folder.../
(1) The background-image attribute sets the background image for the element.
(2) The background of an element occupies the entire size of the element, including padding and borders, but not margins.
(3) By default, the background image is located in the upper left corner of the element and repeats horizontally and vertically.
(4) url('URL'): Path pointing to the image.
Tip: Set an available background color so that the page looks good if a background image is not available.
3. background-repeat background image repeats
By default, the background image will cover the entire page. If the background image is not large enough to cover the entire page, the background image will be repeated in the abscissa and ordinate;
4. background-size sets the size of the background image
5. background-position sets the background image position
Default values: left, bottom, right, top, center (center)
Note: You can also use numerical values or percentages such as background-position: 10px 10px represents the distance of the horizontal and vertical coordinates from the left and top borders;
6. Is background-attachment set to fixed?
7.background-origin
background-origin is a new property in CSS3. When using the background-position attribute to set the position of the background image, the position of the upper left corner of the element is calculated by default. You can also use the background-origin attribute to set the relative position of the background-position attribute to position the background image. The optional values of the background-origin attribute are as follows:
8. background-clip
background-clip is a new attribute in CSS3, through which the display area of the background image can be set. Optional values for the background-clip attribute are as follows:
Note: Background translucency means that the background of the box is translucent, and the content inside the box is not affected.
9. background
background is the abbreviation of background attribute. Through it, you can not only set a certain background attribute for an element, but also set multiple or all background attributes at the same time. There is no fixed order when setting multiple background properties, but it is recommended to use the following order:
background-color||background-image||background-position[/background-size]?||background-repeat||background-attachment||background-origin||background-clip
Note: The difference between background image and img attribute:
(1) The img element belongs to the concept of HTML, and the background image belongs to the concept of css.
(2) When the image belongs to web content, the img element must be used
(3) When the image is only used to beautify the page, the background image must be used