Home >Web Front-end >CSS Tutorial >The most comprehensive summary of background tags in CSS
We often use background in CSS development. This article mainly brings you a summary of CSS background. The editor thinks it is quite good, so I will share it with you now and give it as a reference. I hope it can help everyone.
All background properties cannot be inherited.
1. background-color
All elements can set the background color.
The default value of background-color is transparent; that is, if an element does not specify a background color, the background is transparent so that the background of its ancestor elements is visible.
2. background-image
All elements can set background images;
You can set multiple background images, separated by commas; the background images will cascade, write The level in front is on top.
3. background-repeat
repeat (default)/no-repeat/repeat-x/ repeat-y
4. background-attachment
scroll (default)/fixed
5. background-position
Pixel method: Taking the upper left corner of the image as the starting point, the first value is the horizontal movement distance, and the second value is the vertical movement distance; if only one value is specified, the second value defaults to 50%.
Percentage method: The percentage is applied to both the image and the element, and the corresponding points coincide for positioning. If you specify only a percentage, it means that the vertical direction is 50%.
Keyword method: top, right, bottom, left, center for combined positioning; if only one value is specified, the second value defaults to center.
Note: background-position can be negative.
By default, the background color extends below the border, and the background image is in the upper left corner of the padding area.
6. background-size
Set the size of the background image; the default value is auto.
Pixel method: The first value sets the width, and the second value sets the height; if there is only one value, the second value is auto.
Percent method: Calculated based on the width and height of the parent element.
The keyword cover does not change the aspect ratio of the image and covers the entire element in both horizontal and vertical directions, which may cause part of the image to overflow.
The keyword contain does not change the aspect ratio of the image, and stretches it as much as possible until the entire element is covered in one direction, which may result in the other direction not being covered.
7. background-origin
Define the initial position of the background image
border-box, the upper left corner of the border.
padding-box, upper left corner of padding area; default value.
content-box, upper left corner of the content area.
8. background-clip
The CSS3 background-clip property specifies the painting area of the background.
The property takes three different values:
•border-box - (default) the background is painted to the outside edge of the border
•padding-box - the background is painted to the outside edge of the padding
•content- box - the background is painted within the content box
(English explanation is clearer)
(English is moved from W3Schools Online)
About background -origin and background-clip, they are independent of each other and do not interfere with each other.
Regarding the CSS writing method of background, I personally think it should be logically clear and hierarchical; specifically:
background defines the background image, background-color defines the background color, and background-clip defines the background display area. .
(Personal opinion, for reference only)
Full Size Background Image
If we want to have a background image on a website that covers the entire browser window at all times .
The requirements are as follows:
• Fill the entire page with the image (no white space)
• Scale image as needed
• Center image on page
• Do not cause scrollbars
The following example shows how to do it; Use the html element (the html element is always at least the height of the browser window). Then set a fixed and centered background on it. Then adjust its size with the background-size property:
CSS CodeCopy content to clipboard
Use the horizontal tiling of the background image to achieve a wavy border effect.
(Currently I only have ideas and haven’t found any images that meet my needs.)
Related recommendations:
Basic introduction to css background-attachment attributeFive CSS ways to use tables to implement common layoutsCSS3 detailed introduction to the background-size attributeThe above is the detailed content of The most comprehensive summary of background tags in CSS. For more information, please follow other related articles on the PHP Chinese website!