Python JavaScript SQL HTML R C C++ Java RUST Golang Kotlin Swift C# DSA

Popular Tutorials

Getting Started with R
R ifelse() Function
R Data Frame
R Histogram
R Read and Write CSV
Start Learning R

Popular Examples

Extract Characters from String
Convert Factors to Characters
Add Leading Zeros to Vector
Convert List to Dataframe
Combine two Dataframes
Explore R Examples
Learning Paths
Challenges

Learn Python Interactively

Try for Free

Courses

Interactive SQL Course
Interactive C Course
Interactive Java Course
View all Courses

Web Tutorials

CSS Background Attachment

CSS background-attachment property controls whether the background image scrolls or remains fixed with the page's content. For example,

body {
    background-image: url("coder-illustration.png");
    background-attachment: fixed;
}

Browser Output

   

The background is fixed while scrolling.

   

The background is fixed while scrolling.

   

The background is fixed while scrolling.

   

The background is fixed while scrolling.

   

The background is fixed while scrolling.

   

The background is fixed while scrolling.

   

The background is fixed while scrolling.

   

The background is fixed while scrolling.

   

The background is fixed while scrolling.

   

The background is fixed while scrolling.


Here, background-attachment keeps the background image fixed while scrolling the rest of the content in body.

CSS background-attachment Syntax

The syntax for the background-attachment property is,

background-attachment: scroll | fixed | local | initial | inherit;

Here,

  • scroll: allows the background image to scroll with the page (default value)
  • fixed: stops the background image from scrolling with the page
  • local: allows the background image to scroll with the element's content
  • initial: sets the property value to default
  • inherit: inherits the property value from its parent element

Example 1: Background-Attachment with Scroll

Let's see an example of scroll value with the background-attachment property,

HTML
CSS
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS background-attachment</title>
    </head>

    <body>
        <h1>Using background-attachment: scroll</h1>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>

    </body>
</html>
body {
    background-image: url('https://www.codemy.com/blog/content/images/2021/09/C---Illustration-1.jpg');
    background-attachment: scroll;
    background-repeat: no-repeat;
}

Browser Output

Using background-attachment: scroll

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.


In the above example, the background image scrolls along with the rest of the content in the body element.

Example 2: Background-Attachment With Fixed

Let's see an example fixed value with the background-attachment property,

HTML
CSS
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS background-attachment</title>
    </head>

    <body>
        <h1>Using background-attachment: fixed</h1>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
    </body>

</html>
body {
    background-image: url('https://www.codemy.com/blog/content/images/2021/09/C---Illustration-1.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
}

Browser Output

Using background-attachment: fixed

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.


In the above example, the background image remains fixed. It does not scroll with the rest of the content of the body element.

Table of Contents