CSS Background Properties background

Source: Internet
Author: User
Tags id3

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>


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>


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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.