CSS background-attachment property

Last update on August 19 2022 21:50:33 (UTC/GMT +8 hours)

Background Attachment Property

CSS background attachment property specifies whether the image set using background-image property is fixed with respect to the containing block or shall it scroll.

Syntax:

background-attachment: 	scroll | fixed | inherit

Values

scroll : Specifies that the background image will scroll along with the containing block.

fixed : Specifies that the background image will be fixed against the containing block and will not scroll.

inherit : If set, the associated element takes computed value of its parent element's background-attachment property.

Initial values

scroll.

Applies to

background-attachment property can be applied to all HTML elements.

Inheritance

If no value specified, background-repeat property does not get the computed value of its parent element.

Percentages

Not available.

Media

visual.

Computed value

As specified.

Browser compatibility

Browser	Version
Internet Explorer	4.0 and above
Firefox (Gecko)	1.0 and above
Opera	3.5 and above
Safari (WebKit)	1.0 and above

Example of background-attachment property when value="scroll"

CSS code:

body {background-image: url('w3r.gif'); background-repeat: no-repeat; background-position: 10% 10%; background-attachment: scroll}

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example of background-attachment property when value="scroll"</title>
<link rel='stylesheet' href=example-background-attachment-scroll.css' type='text/css' /> 
</head>
<body>
<p align="center"><b>w3resource.com</b></p>
<p align="center"><b>A complete tutorial on web based development</b></p>
<p align="center"><b>html</b></p>
<p align="center"><b>xhtml</b></p>
<p align="center"><b>css</b></p>
<p align="center"><b>xml</b></p>
<p align="center"><b>svg</b></p>
<p align="center"><b>smil</b></p>
<p align="center"><b>wml</b></p>
<p align="center"><b>javascript</b></p>
<p align="center"><b>ajax</b></p>
<p align="center"><b>sql</b></p>
<p align="center"><b>php</b></p>
<p align="center"><b>mysql</b></p>
<p align="center"><b>apache</b></p>
<p>Dear friends,</p>
<p>These lessons are developed by a group of developers coding for years. While developing applications using HTML, CSS, JAVASCRIPT, AJAX, PHP, MySql and Apache, we found so many  problems, which comes only when you develop and implement a project for real. And these problems are unsolved untill you face to solve it. </p>
<p>We  have discussed HTML, XHTML, CSS, JAVA SCRIPT, AJAX, PHP, MySQL and Apache extensively in these lessons.And included and solved as well, all the problems which we faced during our development process.</p>
<p>All the codes used in these tutorials, are tested extensively with their respective environments and does not leave any possibilities to have a bug.</p>
<p>Still if you find any, write us to fix that.
<p>Thanks & regards</p>
<p><b>Open source is a development method for software that harnesses the power of distributed peer review and transparency of process. The promise of open source is better quality, higher reliability, more flexibility, lower cost, and an end to predatory vendor lock-in.</b></p>
<p><b>The Open Source Initiative (OSI) is a non-profit corporation formed to educate about and advocate for the benefits of open source and to build bridges among different constituencies in the open-source community.</b></p>
<p><b>One of our most important activities is as a standards body, maintaining the Open Source Definition for the good of the community. The Open Source Initiative Approved License trademark and program creates a nexus of trust around which developers, users, corporations and governments can organize open-source cooperation.</b></p>
</body>
</html>

View this example in a separate browser window

Example of background-attachment property when value="scroll".

Example of background-attachment property when value="fixed"

CSS code:

body {background-image: url('w3r.gif'); background-repeat: no-repeat; background-position: 10% 10%; background-attachment: fixed}

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example of background-attachment property when value="fixed"</title>
<link rel='stylesheet' href=example-background-attachment-fixed.css' type='text/css' /> 
</head>
<body>
<p align="center"><b>w3resource.com</b></p>
<p align="center"><b>A complete tutorial on web based development</b></p>
<p align="center"><b>html</b></p>
<p align="center"><b>xhtml</b></p>
<p align="center"><b>css</b></p>
<p align="center"><b>xml</b></p>
<p align="center"><b>svg</b></p>
<p align="center"><b>smil</b></p>
<p align="center"><b>wml</b></p>
<p align="center"><b>javascript</b></p>
<p align="center"><b>ajax</b></p>
<p align="center"><b>sql</b></p>
<p align="center"><b>php</b></p>
<p align="center"><b>mysql</b></p>
<p align="center"><b>apache</b></p>
<p>Dear friends,</p>
<p>These lessons are developed by a group of developers coding for years. While developing applications using HTML, CSS, JAVASCRIPT, AJAX, PHP, MySql and Apache, we found so many  problems, which comes only when you develop and implement a project for real. And these problems are unsolved untill you face to solve it. </p>
<p>We  have discussed HTML, XHTML, CSS, JAVA SCRIPT, AJAX, PHP, MySQL and Apache extensively in these lessons.And included and solved as well, all the problems which we faced during our development process.</p>
<p>All the codes used in these tutorials, are tested extensively with their respective environments and does not leave any possibilities to have a bug.</p>
<p>Still if you find any, write us to fix that.
<p>Thanks & regards</p>
<p><b>Open source is a development method for software that harnesses the power of distributed peer review and transparency of process. The promise of open source is better quality, higher reliability, more flexibility, lower cost, and an end to predatory vendor lock-in.</b></p>
<p><b>The Open Source Initiative (OSI) is a non-profit corporation formed to educate about and advocate for the benefits of open source and to build bridges among different constituencies in the open-source community.</b></p>
<p><b>One of our most important activities is as a standards body, maintaining the Open Source Definition for the good of the community. The Open Source Initiative Approved License trademark and program creates a nexus of trust around which developers, users, corporations and governments can organize open-source cooperation.</b></p>
</body>
</html>

View this example in a separate browser window

Example of background-attachment property when value="fixed".

CSS background-attachment property

Background Attachment Property

See also