CSS Background Properties

The Background property can set the background style of an element, assuming that the element has a specific width and height value.

Let's start with a simple background setting:

1             {2 width: 800px;          3            height: 500px;  4            background: #000;  5            background-image: url (image URL);  6         }7    </style>

This is simply the setting of the color and background map.

Let's look at the properties of the official background:

Syntax format:

　　Background: color position Size Repeat origin clip attachment image;

Note: If you set both "position" and "size" two properties, you should use the left slash "/" instead of separating the two parameter values with a space: "Position/size".

1 Background:url ("img.jpg") center center/100% 100% No-repeat;

property sheet (the picture may appear too small, right-click "Open in New tab" to view the original):

　　

1.color: Background color value. This property adds a color to the entire element and is at the bottom (as you can see with a background image).

Optional values: The default is transparent, and other values can be set by viewing the CSS color values table.

1 <style>2 #show-box{3 width:180px;4 Height:180px;5 Border:20px Dashed #000;6 Background-color:#000000;7 Background-color:Blue;8 Background-color:RGB (255, 255, 255);9 Background-color:Rgba (255, 255, 255, 0.8);Ten} One </style>

2.position: The positioning of the background image. If there is no picture set, this property does not work.

Selectable values: Two parameters, horizontal position and vertical position. If there is only one value, the second value is "center".

The default value is the upper-left corner of the element. You can use the Location keyword (top,right,bottom,left,center). The percentage, in element size, as the base value. The pixel value.

1 <style>2 #show-box{3 width:180px;4 Height:180px;5 Border:20px Dashed #000;6 background-position:Center;7 background-position:Center Top;8 background-position:0 100px;9 background-position:10% 20%;Ten} One </style>

3.size: Picture size. Apply to the picture.

Optional value: Two values, if there is only one value, the second value is auto.

The default is the size of the picture itself. You can use pixel values, hundred percent (based on the element size).

Cover: Scales the picture, overriding the element. A "fill" similar to the desktop background in Windows.

Contain: Scales the picture to fit the width or height of the element. "Fit" similar to the desktop background in Windows.

　　

4.repeat: Tiling mode.

Repeat: completely tiled, copy the picture to fill the entire element. Default

Repeat-x: horizontal tiling, copying and tiling horizontally.

Repeat-y: Vertical tiling, copying and tiling in vertical direction.

No-repeat: Uneven, use only one picture.

5.origin: Reference area of the background.

Optional value: Border-box,padding-box,content-box.

6.clip: The visible area of the background.

Optional value: Border-box,padding-box,content-box.

Compare the different values:

1.origin:border-box;clip:border-box;

1 <style>2 #show-box{3 width:180px;4 Height:180px;5 margin:20px;6 padding:20px;7 Border:20px Dashed #000;8 background:URL ("img.jpg") no-repeat border-box border-box;9}Ten </style>

　　　　

2.origin:padding-box;clip:border-box;

1 <style>2 #show-box{3 width:180px;4 Height:180px;5 margin:20px;6 padding:20px;7 Border:20px Dashed #000;8 background:URL ("img.jpg") no-repeat padding-box border-box;9}Ten </style>

　　　　

　　　　

3.origin:content-box;clip:border-box;

1 <style>2 #show-box{3 width:180px;4 Height:180px;5 margin:20px;6 padding:20px;7 Border:20px Dashed #000;8 background:URL ("img.jpg") no-repeat content-box border-box;9}Ten </style>

　　　　

4.origin:border-box;clip:content-box;

1 <style>2 #show-box{3 width:180px;4 Height:180px;5 margin:20px;6 padding:20px;7 Border:20px Dashed #000;8 background:URL ("img.jpg") no-repeat border-box content-box;9}Ten </style>

　　　　

As you can see, Origin sets the position, and clip clips the background image based on the area.

7.attachment: Sets whether the background image is fixed or scrolls along with the rest of the page.

The default value is scroll: The background picture scrolls with the rest of the page. Fixed: The background image is stationary.

8. Multi-background settings.

Import Picture: background-image:url (image URL);

Two, multi-background settings.

Multi-background notation: Use comma "," to separate, continue to write background properties.

Background: color position Size Repeat origin clip attachment image, color position Size Repeat origin clip attach ment image;

The specific properties can also be set individually: background-image:url (image URL 1), url (image URL 2);

1 <style>2 #show-box{3 width:180px;4 Height:180px;5 Border:20px Dashed #000;6 background:URL ("Img.jpg1") left top/100% 100% no-repeat,7 URL ("img.jpg2") left center/100% 100% no-repeat,8 URL ("Img.jpg3") left bottom/100% 100% no-repeat,9 URL ("img.jpg4") center top/100% 100% No-repeat;Ten} One </style>

1 <style>2 #show-box{3 width:180px;4 Height:180px;5 Border:20px Dashed #000;6 Background-image:URL (" img.jpg1"), url ("img.jpg2"), url ("img.jpg3"), url ("Img.jpg4");7 background-position:Left top, left center, left bottom, center top;8 background-size:100%;9 background-repeat:no-repeat;Ten} One </style>

CSS Background Properties