Home > Developer > Web Develop
The Background property is an abbreviation for all background properties:
The following are the background properties:
Background-color: Background color
You can use the color name (red/green/blue) to set
You can also use Hex (#fff/#000/#bcbcbc)
RGB (X,X,X) x values can also be used (0~255)
Background-position: Background Start position
is also three kinds of value, the first is a combination of locality (Top/right/bottom/left), such as left top
Percent x x percent, such as 0% 0% for upper left corner
Expressed in pixels, such as 100px 100px
Background-size: Background size
You can adjust the background size by setting a given length, such as background-size:100px 80px;
can also be set by percentage, note that the percentage here is the background positioning area, not the original size of the image. such as background-size:50% 50%;
Background-repeat: Background Repeat settings
No-repeat: No repetition
Repeat-x: Repeat in x (horizontal) direction
Repeat-y: Repeat in Y (vertical) direction
Repeat: Repeat
Background-origin: Specifies the relative position of the Background-position property
Padding-box: The relative position of the background fill box
Border-box: Relative position of background border
Content-box: The position of the background relative to the content box
<!DOCTYPE HTML><HTML><Head><style>Div{width:100px;Height:100px;Border:1px solid Black;padding:20px;margin:20px;Background-image:URL ("weixin.png");background-repeat:no-repeat;background-position:Top;float: Left;}#id1{Background-origin:Padding-box;}#id2{Background-origin:Content-box;}#id3{Background-origin:Border-box;}</style></Head><Body><DivID= "Id1">Background-origin: Specifies the relative position of the Background-position property</Div><DivID= "Id2">Background-origin: Specifies the relative position of the Background-position property</Div><DivID= "ID3">Background-origin: Specifies the relative position of the Background-position property</Div></Body></HTML>
Effect:
Background-clip: Drawing area of the background
Same as Padding-box/border-box/content-box three values
<!DOCTYPE HTML><HTML><Head><style>Div{width:100px;Height:100px;Border:1px dotted Grey;padding:20px;margin:20px;float: Left;Background-color:Red;Border-width:10px;}#id1{Background-clip:Padding-box;}#id2{Background-clip:Content-box;}#id3{Background-clip:Border-box;}</style></Head><Body><DivID= "Id1">Red is the background</Div><DivID= "Id2">Red is the background</Div><DivID= "ID3">Red is the background</Div></Body></HTML>
Effect:
Background-attachment: Whether the background is fixed or scrolling with the page
Fixed: Stationary
Scroll: Scrolling (default)
Background-image: Background image
URL: Image Path
CSS Background Properties background
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
