CSS Learning notes-background properties

Always use the abbreviated form of background, ignoring the details of each attribute to summarize here.   background-attachmentWeb: Property sets whether the background image is fixed or scrolls along with the rest of the page. Property Value:scroll the default value. The background image moves as you scroll through the rest of the page. fixed the background image does not move when the rest of the page scrolls. inherit specifies that the settings for the Background-attachment property should be inherited from the parent element.   background-positionSite: Property sets the starting position of the background image. Where the first value is a horizontal position and the second value is a vertical position. Assuming the container width is 500px,250px, the image width height is 100px:when positioning using px equal length units, the upper-left corner of the picture is offset by the upper-left corner of the container as a datum (including padding). such as background-position:50px 100pxwhen using percent positioning, the offset is calculated as: (Width of the container-the width of the picture) x value. For example background-position:50% 50%using keyword positioning, the optional keywords are left, center, right, top, bottom, respectively, corresponding to 0 50% 100%.  Note:1. When using the Background-repeat:no-repeat;2. If the offset is too large, the excess portion will be hidden;3. Negative values can be used when positioning with percent and length units;4. If only one value is specified, then the other value is 50% (center);5. When Background-attachment:scroll, the background-position is positioned relative to the contents of the container and the upper-left corner of the inner margin (e.g.), and when Background-attachment:fixed, The background positioning is based on the upper left corner of the body's Padding-box (also background-position:50px 100px): background-repeatA : Whether the property is set and how the background image is repeated. Property Value:repeat Default. the background image repeats in both vertical and horizontal directions. The repeat-x background image will be repeated in the horizontal direction. The repeat-y background image will be repeated in the vertical direction. the no-repeat background image will be displayed only once. inherit specifies that the settings for the Background-repeat property should be inherited from the parent element.   Background-imageA: Property sets the background image for the element. The default value is Noneand you need to set the URL (' url ') when setting it. (If a relative path is used, the path is relative to the file that writes this property)  Background-colorA: Property sets the background color of the element. the range of element backgrounds: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 excluding margins). If the border has a transparent part (such as a dashed border), the background color is displayed through these transparent sections. Property Value:color_name Specifies that the color value is the background color of the color name (such as red). hex_number Specifies the background color (such as #ff0000) for which the color value is a hexadecimal value. rgb_number Specifies that the color value is the background color of the RGB code (such as RGB (255,0,0)). Transparent default. the background color is transparent. inherit specifies that the settings for the Background-color property should be inherited from the parent element.   The following are the new attributes for CSS3: ( ie9+, Firefox 4+, Opera, Chrome, and Safari 5+ support. ) Background-clipThe Map: attribute specifies the drawing area of the background. Property Value:border-box Default. the background is cropped to the bounding box. The Padding-box background is cropped to the inner margin box. The Content-box background is cropped to the content box.   Background-originA : The location of the attribute relative to the position. Property Value:padding-box Default. The background image is positioned relative to the inner margin box. The Border-box background image is positioned relative to the bounding box. The Content-box background image is positioned relative to the content box.  Note: invalid when background-attachment:fixed. (I test, is relative to the body of the Padding-box positioning)  background-sizeA: attribute specifies the size of the background image. Property Value:length sets the height and width of the background image. The first value sets the width, and the second value sets the height. If you set only one value, the second value is set to "Auto". percentage sets the width and height of the background image as a percentage of the parent element. The first value sets the width, and the second value sets the height. If you set only one value, the second value is set to "Auto". Cover the background image to be large enough to allow the background image to completely cover the background area. Some parts of the background image may not appear in the background positioning area. The contain expands the image image to its maximum size so that its width and height are fully adapted to the content area. here differentiates the following cover and contain: (Background-attachment:scroll)Background-size:cover Background-size:containIt is obvious that when the value is cover, the purpose is to fill the container, and when the duty is contain, it is the maximum area that the background map can cover when it does not overflow the container. when the Background-position property is set to offset, it is equivalent to Background-size to determine the size, then offset, (background-position:50px 100px)Background-size:cover Background-size:containwhen background-attachment:fixed, the container becomes body.  Finally, for simplicity, you can declare all the background properties using background shorthand, for example:background:transparent URL (black-block.jpg) no-repeat scroll 50px 100px border-box padding-box;attribute Order:Background-color | background-image | background-repeat | background-attachment | background-position | Background-origin | Background-clipNote:1. The order can be replaced, but note that when the Background-origin and Background-clip are the same, the first appearance of the set is Background-origin;2.background-size attribute, I add on the error, I do not know why.  in general, CSS3 These new attributes give us more control over the background.  This article refers to http://www.w3school.com.cn/and combines your own tests. If there is any mistake, please correct me! If you think this article is helpful to you, please click "recommend", would you like to make progress with me? Then "Pay attention" to me!

CSS Learning notes-background properties