bugl
bugl
HomeLearnPatternsPathsSearch
HomeLearnPatternsPathsSearch

Loading lesson path

Learn/CSS/CSS Foundations
CSS•CSS Foundations

CSS Background Attachment

Flash cards

Review the key moves

1/4
Core idea

What is the main idea behind CSS Background Attachment?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

___-image: url("img_tree.png");
3Order

Put the learning moves in the order that makes the concept easiest to apply.

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

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

Formatted code
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

Live preview

Example

Formatted code
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

Live preview

The CSS Background Attachment Property

PropertyDescription
background-attachmentSets whether a background image is fixed or scrolls with the rest of the page

Previous

CSS Background Image Repeat

Next

CSS Background Shorthand