Background Attachment In CSS
The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.
Syntax -
|
body {
background-image: url('img.jpg');
background-attachment: fixed;
}
|
Now we will see two main values of the background-attachment property
1.scroll
The background scrolls along with the element. This is default.
2.Fixed
The background is fixed with regard to the viewport.
Note -
We will only see example of fixed property because if you set an image then by default it is set to scroll which means image will move when you will scroll
Example - Using Fixed property
Now the image will not move even if you scroll the page
|
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
body
{
background-image: url(krishnaimage.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
}
</style>
<link rel="stylesheet" href="sample.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 class="fruit">This is first Heading
</h1>
<p class="apple">
this is an apple and an apple a day keeps doctor away
</p>
<p class="apple">
this is an apple and an apple a day keeps doctor away
</p>
<p class="apple">
this is an apple and an apple a day keeps doctor away
</p>
<p class="apple">
this is an apple and an apple a day keeps doctor away
</p>
<p class="apple">
this is an apple and an apple a day keeps doctor away
</p>
<p class="apple">
this is an apple and an apple a day keeps doctor away
</p>
<p class="apple">
this is an apple and an apple a day keeps doctor away
</p>
<p class="apple">
this is an apple and an apple a day keeps doctor away
</p>
<p class="apple">
this is an apple and an apple a day keeps doctor away
</p>
<p class="apple">
this is an apple and an apple a day keeps doctor away
</p>
<p class="apple">
this is an apple and an apple a day keeps doctor away
</p>
<p class="apple">
this is an apple and an apple a day keeps doctor away
</p>
<p class="apple">
this is an apple and an apple a day keeps doctor away
</p>
<p class="apple">
this is an apple and an apple a day keeps doctor away
</p>
<p class="apple">
this is an apple and an apple a day keeps doctor away
</p>
<p class="apple">
this is an apple and an apple a day keeps doctor away
</p>
<p class="apple">
this is an apple and an apple a day keeps doctor away
</p>
<p class="apple">
this is an apple and an apple a day keeps doctor away
</p>
<p class="apple">
this is an apple and an apple a day keeps doctor away
</p>
<p class="apple">
this is an apple and an apple a day keeps doctor away
</p>
<p class="apple">
this is an apple and an apple a day keeps doctor away
</p>
<p class="apple">
this is an apple and an apple a day keeps doctor away
</p>
<p class="apple">
this is an apple and an apple a day keeps doctor away
</p>
<p class="apple">
this is an apple and an apple a day keeps doctor away
</p>
<p class="apple">
this is an apple and an apple a day keeps doctor away
</p>
<p class="apple">
this is an apple and an apple a day keeps doctor away
</p>
</body>
</html>
|
Output -
