CSS Background-attachment
The 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.
They are three values scroll, fixed, and local.
Syntax:
background-attachment: scroll | fixed | local | initial | inherit;
Property Values:
scroll: The default value and that prevents the element from scrolling with the contents, but scrolls with the page.
fixed: Background image does not move with the element, even that element has a scrolling mechanism.
local: Using this value, if the element has a scrolling mechanism, the background image scrolls with the content of the element.
initial: The property to its default value.
inherit: This Property from its parent element.
Example:
Using the scroll value of the background-attachment property
<!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: #ff6699;
background-repeat: no-repeat;
background-attachment: scroll;
}
</style>
</head>
<body>
<h1> background-attachment: scroll;</h1>
<div id="example">
<p>
Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.
</p>
</div>
</body>
</html>
OUTPUT:
Example – Using fixed value:
<!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: #ff6699;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1> background-attachment: fixed;</h1>
<div id="example">
<p>
Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.Enter text here.
</p>
</div>
</body>
</html>
OUTPUT:
