html

Background attachment in CSS

The background images make a great impact on the look and feel of any website. When we scroll a webpage/content then what will be the behavior of the background image? Whether it will also move with content or not.

Well! by default, the background image scroll with the content. The background-attachment property is specifically used to determine the response of the background image. It decides the behavior of the background image using the following values:

  • fixed: Assigning the fixed value to the background image will fix the image on the webpage.
  • scroll: The scroll value allows an image to scroll with the content.
  • local: The local value allows an image to scroll with the content of an element.

This write-up will provide a detailed understanding of the background-attachment property in CSS. For better understanding, this article will consider some examples with different background-attachment values.

Syntax

The below snippet describes the syntax of background-attachment property

background-attachment: value

Let’s discuss what values background-attachment property can take.

fixed value

The “fixed” value sets the image to a specific position. The image wouldn’t move with the content.

Example

The below-given code will explain how to set the fixed value for the background-attachment property

HTML

<h1>Background-image: Fixed </h1>

<p> all the content written here!</p>

CSS

body {

background-image: url("cover.jpg");

background-repeat: no-repeat;

background-position: left top;

background-attachment: fixed;

}

The above code generates the following output:

The output clarifies that the image remains fixed.

scroll value

The “scroll” value allows us to scroll the image with the content. For better understanding consider the below given code:

HTML

<h1>Background-image: Scroll</h1>

<p> all the content written here!</p>

CSS

body {

background-image: url("cover.jpg");

background-repeat: no-repeat;

background-position: left top;

background-attachment: scroll;

}

The above code will produce the following output:

local value

Local value moves the image with the content of the element. However, If you implement the local in the above example the result will look the same as the scroll value. So, how we can differentiate the local and scroll values?

The difference between the local and scroll values can be noticed in a scenario where there are multiple scrollable areas on a webpage.

Example

This example will provide the code for local value for the multiple scrollable areas.

HTML

<div class="box">

<h1>Background-image: Local</h1>

<p style="text-align: center;"> all content comes here</p>

</div>

CSS

.box

{

width: 500px;

height: 500px;

margin: 100px;

border: 10px solid black;

overflow: auto;

background-image: url("cover.jpg");

background-repeat: no-repeat;

background-attachment: local;

}

The output of the above given code will be like this:

There are two scroll bars in the above output. When we move any scroll bar i.e. internal or external the image moves with the content.

In the above code, use scroll instead of local and observe the difference.

CSS Scroll

background-attachment: scroll;

Following output will appear for the scroll value:


There are two scroll bars. When we scroll the outer bar the image move with the content. And when we scroll the inner bar image remained fixed.

Conclusion

The background-attachment property specifies how a background image will behave. It takes three values ie. fixed, scroll, local. “fixed” to fix the image at a specific position, “scroll” to move the image with content, and “local” to move the image with the element’s content.

This write-up presented a detailed overview of the background-attachment property. Furthermore, this writeup demonstrated how to use fixed, scroll, and local value for the attachment property.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.