CSS TutorialLesson #19

Background Attachment

The `background-attachment` property specifies

CSS background-attachment

The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page):

Example

Example Code

css

Try it Yourself

body
{

  background-image: url("img_tree.png");

  background-repeat: no-repeat;

  background-position: right top;

    background-attachment: fixed;
}

Example

Example Code

css

Try it Yourself

body
{

  background-image: url("img_tree.png");

  background-repeat: no-repeat;

  background-position: right top;

    background-attachment: scroll;
}

The CSS Background Attachment Property

Property	Description
background-attachment	Sets whether a background image is fixed or scrolls with the rest of the page

Video: CSS Background Attachment

Interactive Code Examples

CSS Example 1

css

Try it Yourself

Interactive runnable CSS example from EA Academy.

Live Output Preview:

CSS Example 2

css

Try it Yourself

Interactive runnable CSS example from EA Academy.

Live Output Preview:

Previous: Background Repeat Next: Background Shorthand