COURSE SYLLABUS

1. Introduction to CSS

Introduction to CSS How CSS Works CSS vs HTML Adding CSS

2. CSS Basics

CSS Basics CSS Syntax Inline CSS Internal CSS External CSS CSS Comments

3. CSS Selectors

CSS Selectors Element Selector Class Selector ID Selector Attribute Selector Descendant Selector Child Selector Pseudo-Class Selector Pseudo-Element Selector

4. Colors & Backgrounds

Colors & Backgrounds Color Values Background Color Background Image Background Repeat Background Attachment Multiple Backgrounds

5. Text & Fonts

Text & Fonts Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow Font Family Font Size Font Style Font Weight Web Fonts

6. CSS Box Model

CSS Box Model Width & Height Padding Margin Border Border Radius Box Sizing Box Shadow Overflow

7. Flexbox

Flexbox Flex Container Flex Direction Flex Wrap Justify Content Align Items Align Content Gap Flex Items Order Flex Grow Flex Shrink Flex Basis

8. CSS Grid

CSS Grid Grid Container Grid Rows & Columns Grid Template Columns Grid Template Rows Grid Gap Grid Column Grid Row Grid Area Grid Alignment Responsive Grid

9. Responsive Design

Responsive Design Responsive Web Design Viewport Media Queries Breakpoints Mobile First Responsive Images Responsive Typography

10. Advanced CSS

Advanced CSS CSS Pseudo-Classes CSS Pseudo-Elements CSS Transforms CSS Transitions CSS Animations CSS Variables CSS Functions CSS Specificity CSS Best Practices

Background Attachment

The background-attachment property controls whether a background image scrolls with the page or stays fixed.

The most commonly used values are scroll and fixed.

Background Attachment Flow

Background Image

→

background-attachment

→

Scrolling Behavior

Example 1: Scroll

The scroll value makes the background image move along with the element when the page is scrolled.

CSS Code

div {
    background-image: url("https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1200&q=80");
    background-attachment: scroll;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 280px;
}

Output

Background Scroll

The background image scrolls with the element.

Example 2: Fixed

The fixed value keeps the background image fixed relative to the viewport while the page content scrolls.

CSS Code

div {
    background-image: url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1200&q=80");
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 280px;
}

Output

Background Fixed

The background image stays fixed while content scrolls.

Example 3: Local

The local value allows the background image to scroll with the element's content.

CSS Code

div {
    background-image: url("https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1200&q=80");
    background-attachment: local;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 280px;
}

Output

Background Local

The background scrolls with the element's content.

Background Attachment Values

Value	Behavior
`scroll`	Background image scrolls with the element.
`fixed`	Background image stays fixed relative to the viewport.
`local`	Background image scrolls with the element's content.

Simple Explanation

scroll → Background moves when the page scrolls.

fixed → Background stays fixed while the page content moves.

local → Background scrolls with the element's content.

Summary

Use background-attachment to control background scrolling behavior.
scroll moves the background with the page.
fixed keeps the background fixed.
local scrolls the background with element content.

← Previous: Background Repeat

Next: Multiple Backgrounds →