CSS background attachment

web development

Thursday 1 April 2021

Hacker

web development

CSS background-attachment

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

The CSS background-attachment property is used to specify that the background image is fixed or scroll with the rest of the page in the browser window.

CSS Background Attachment

This CSS property has three values scroll, fixed, and local. CSS background attachment property default value is scroll, which causes the element to not scroll with his content. The local value of CSS background attachment property causes the element to scroll with its content. If we are set the value to fixed, the background image will not move during scrolling in the web browser.

Example

Specify that the background image should be fixed:

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

Try it Yourself »

CSS background attachment Property Values

scroll: scroll is the default value of CSS background attachment property that prevents the element from scrolling with the page contents, but scrolls with the page.

fixed: Using this value in the CSS, the background image does not move with the element, even the element's has a scrolling mechanism. It cause of the image to be locked in single place, even the rest of the web document scrolls.

local: In the CSS Using this value, the background image scrolled with the content of the web element.

initial: Initial sets the property to its default value.

inherit: It are inherits the property from its parent element.

Let's understand this property by using some illustrations

Example

Specify that the background image should be scrolled with the rest of the web page:

body {

background-image: url("img_tree.png");

background-repeat: no-repeat;

background-position: right top;

background-attachment: scroll;

}

Try it Yourself »

Let's understood CSS background attachment with full example :

Example

<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property
</title>

<style>
#example {
background-image: url("lion.png");
font-size: 35px;
border: 4px solid red;
color: white;
background-position: center;
background-color: green;
background-repeat: no-repeat;
background-attachment: scroll;
}

</style>
</head>

<body>
<h1> background-attachment: scroll;</h1>
<p> If there is no scrollbar on your screen, then try to resize the your browser's window to see the effect. </p>
<div id="example">
<p>
Hi, Welcome to the rahasyacommunity. This site is developed so that students may learn IT/computer science related technologies. The rahasyacommunity is always providing an easy and in-depth complete tutorial on various technologies. No one is perfect in this world . But Rahasyacommunity can try to be best.
</p>
</div>

</body>
</html>