Source: Internet
Author: User


Background is a compliant property. The attributes are as follows:

Background: Background-color | background-image | background-repeat | background-attachment | background-Position



Default Value: tansparent

Value Description (background color) Example Effect
Transparent Transparent background color
<Div style ="Background-color: Aqua"> <Span style ="Border: solid 1px black"> Span </span> <br/> Div </div>
Color Color
1. System-defined colors
2. RGB (1, 100,100,100)
3. # ffee11
<Div style ="Background-color: Silver"> Harmonious society </div> <Div style ="Background-color: RGB (100,200, 90)"> Harmonious society </div> <Div style ="Background-color: # ff11f6"> Harmonious society </div>



Default Value: None

Value Description (background image) Example Effect
None No background image
<Div style ="Background-image: None"> Background </div>

Specify the background image with an absolute or relative URL

<Div style ="Background-image: url('del.gif ')"> </Div>



Default Value: Repeat

Value Description (tiled background) Example Effect
Repeat Tiled horizontally and vertically
<Div style ="Background-image: url('del.gif '); background-repeat: Repeat"> </Div>
No-repeat Not tiled
<Div style ="Background-image: url('del.gif '); background-repeat: No-repeat"> </Div>
Repeat-x Tiled horizontally
<Div style ="Background-image: url('del.gif '); background-repeat: Repeat-x"> </Div>
Repeat-y Tile vertically
<Div style ="Background-image: url('del.gif '); background-repeat: Repeat-y"> </Div>



Default Value: Scroll

Value Description (background scrolling) Example Effect
Scroll Scroll with content
<Body style ="Background-image: url('del.gif '); background-repeat: No-Repeat;Background-Attachment:Scroll"></Body>
As the scroll bar moves, it may be invisible.
Fixed No matter how you scroll, it is always fixed on the page
<Body style ="Background-image: url('del.gif '); background-repeat: No-Repeat;Background-Attachment:Fixed"></Body>
Always show



Default Value: 0% 0%

If only one value is specified, the value is used for abscissa. The default ordinate value is 50%. If two values are specified, the second value is used for ordinate.

Expression Example Effect
Background-position: length | length
Percent | length value composed of floating point numbers and unit identifiers
<Div style ="Background-image: url('del.gif '); background-position: 10px 10px;Background-repeat: No-repeat"></Div> <br/> <Div style ="Background-image: url('del.gif '); background-position: 50% 50%;Background-repeat: No-repeat"></Div>
Background-position: Position | position

First position: Top center bottom
Second position: left center right

<Div style ="Background-image: url('del.gif '); background-position: left center;Background-repeat: No-repeat"></Div> <br/> <Div style ="Background-image: url('del.gif '); background-position: center;Background-repeat: No-repeat"></Div>


Attribute name Value Default Value
Background-position-x Length/left/center/right 0%
Background-position-y Length/top/center/Bottom 0%



& Lt; TD width = "129" & gt; color & lt;/TD & gt;
value description example effect
transparent transparent background color
specify the color
Related Article

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.