Value: Scroll | Fixed | Inherit
Scroll: As the scroll axis background picture of the page will move
Fixed: The background picture will not move as the scroll axis of the page
Inherit: Inheritance
Initial value: Scroll
Inheritance: No
Applies to: all elements
Background: background. Attachment: Attachment.
Example
Body {background-image:url (' list-orange.png '); background-attachment:fixed;background-repeat:repeat-x; Background-position:center Center;}The background image of the screen is an orange line. As the scroll axis moves, the Orange Line's visual position is unchanged.
CSS Background-attachment Property Example--you can try to edit
CSS Background-attachment Property Example
Parallax Scrolling (Parallax scrolling) is a multi-layered background that moves at different speeds, creating a three-dimensional movement that results in a very good visual experience. As a hot trend in web design this year, more and more websites have applied this technology.
If you don't understand, you can look at the effects on ebay first: http://www.ebay.com/new/
In fact, the fixed background does not allow it to move with the scrolling axis, but the container containing the background is scrolled along, resulting in visual differences that look like the conversion scenario. (This explanation is not too confusing ...) ）
The properties that define the scrolling style of the background in CSS are backgroud-attacthment
Background-attachment--Define how the background image moves with the scroll axis
Value: Scroll | Fixed | Inherit
Scroll: 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.
Initial value: Scroll
Inheritance: No
Applies to: all elements
Browser support:
Test chrome,opera,safari,firefox,ie7-8 are OK, so that means IE6 not ~
To use this attribute under IE6, you need to place background-attachment:fixed in body or HTML, which means that you say it is useless in other tags. The above can see the effect is because it is placed in the body.
This is a demo of my own, click to download
Code:
<!doctype html>
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
