CSS background attachment:-
If you add an image in background you scroll the page then your added image scroll with page then you have to use background-attachment property for fix the image.
<!DOCTYPE html>
<html>
<head>
<style>
/*here you can use you image*/
body{background-image: url("img_tree.png")
background-position: right top;
margin: 200px;
background-attachment: fixed;
background-repeat: no repeat;}
</style>
</head>
<body>
<h1> CSS Background attachment property</h1>
<p> The background attachment property specifies whether the background image should scroll or be fix.</p>
<p> The background image is fixed. Try to scroll down the page for checking.</p>
<p> The background image is fixed. Try to scroll down the page for checking.</p>
<p> The background image is fixed. Try to scroll down the page for checking.</p>
<p> The background image is fixed. Try to scroll down the page for checking.</p>
<p> The background image is fixed. Try to scroll down the page for checking.</p>
<p> The background image is fixed. Try to scroll down the page for checking.</p>
<p> The background image is fixed. Try to scroll down the page for checking.</p>
<p> The background image is fixed. Try to scroll down the page for checking.</p>
<p> The background image is fixed. Try to scroll down the page for checking.</p>
<p> The background image is fixed. Try to scroll down the page for checking.</p>
<p> The background image is fixed. Try to scroll down the page for checking.</p>
<p> The background image is fixed. Try to scroll down the page for checking.</p>
<p> The background image is fixed. Try to scroll down the page for checking.</p>
<p> The background image is fixed. Try to scroll down the page for checking.</p>
<p> The background image is fixed. Try to scroll down the page for checking.</p>
<p> The background image is fixed. Try to scroll down the page for checking.</p>
<p> The background image is fixed. Try to scroll down the page for checking.</p>
<p> The background image is fixed. Try to scroll down the page for checking.</p>
<p> The background image is fixed. Try to scroll down the page for checking.</p>
<p> The background image is fixed. Try to scroll down the page for checking.</p>
</body>
</html>
Try this code for a better experience
Specify the image will not scroll when you scroll page.
<!DOCTYPE html>
<html>
<head>
<style>
/*here you can use you image*/
body{background-image: url("img_tree.png")
background-position: right top;
margin: 200px;
background-attachment: scroll;
background-repeat: no repeat;}
</style>
</head>
<body>
<h1> CSS Background attachment property </h1>
<p> The background image is scroll. Try to scroll down the page for checking.</p>
<p> The background image is scroll. Try to scroll down the page for checking.</p>
<p> The background image is scroll. Try to scroll down the page for checking.</p>
<p> The background image is scroll. Try to scroll down the page for checking.</p>
<p> The background image is scroll. Try to scroll down the page for checking.</p>
<p> The background image is scroll. Try to scroll down the page for checking.</p>
<p> The background image is scroll. Try to scroll down the page for checking.</p>
<p> The background image is scroll. Try to scroll down the page for checking.</p>
<p> The background image is scroll. Try to scroll down the page for checking.</p>
<p> The background image is scroll. Try to scroll down the page for checking.</p>
<p> The background image is scroll. Try to scroll down the page for checking.</p>
<p> The background image is scroll. Try to scroll down the page for checking.</p>
<p> The background image is scroll. Try to scroll down the page for checking.</p>
<p> The background image is scroll. Try to scroll down the page for checking.</p>
<p> The background image is scroll. Try to scroll down the page for checking.</p>
<p> The background image is scroll. Try to scroll down the page for checking.</p>
<p> The background image is scroll. Try to scroll down the page for checking.</p>
<p> The background image is scroll. Try to scroll down the page for checking.</p>
<p> The background image is scroll. Try to scroll down the page for checking.</p>
<p> The background image is scroll. Try to scroll down the page for checking.</p>
<p> The background image is scroll. Try to scroll down the page for checking.</p>
<p> The background image is scroll. Try to scroll down the page for checking.</p>
</body>
</html>
Try this code for a better experience
0 Comments