❮❮ PREV NEXT ❯❯

CSS - Background Attachment

Let us say, you want keep the background image fixed when you scroll through the HTML page. In such scenarios we can use the background-attachment property with its value as fixed.

Using fixed background-attachment for background-image

Example :

<html>
<head>
	<style>
		body {
  			background-image: url("my_image.png");
            background-repeat: no-repeat;
            background-attachment: fixed;
  		}
	</style>	
</head>
	
<body>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>	
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
</body>
</html>

Output :

So, if you look at the above example, even though we scroll through the HTML page the background image remains fixed.

It is because we have used the background-attachment property of CSS and set its value as fixed.

<style>
	body {
		background-image: url("my_image.png");
		background-repeat: no-repeat;
		background-attachment: fixed;
	}
</style>

Now, what if you want the background image to scroll when we scroll through the page. In such case you can set the value of background-attachment property to scroll.

Using scroll value for background-attachment

Example :

<html>
<head>
	<style>
		body {
  			background-image: url("my_image.png");
            background-repeat: no-repeat;
            background-attachment: scroll;
  		}
	</style>	
</head>
	
<body>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>	
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
	<p> This is the a paragraph. </p>
</body>
</html>

Output :

❮❮ PREV NEXT ❯❯