The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element. I was already written one post of CSS Background Image Property Tutorial that covers the most of the css background image information. But in this tutorial i am writing about the fixed position background image CSS details.
In web 2.0, if you are going to use the gradients background in the page website then it may be work also work for you.
See the default syntax of the background image fixed position css:
body
{
background:url(your-image-bg.png) top right no-repeat; background-attachment:fixed;
}
In above syntax you know very well about the background property css. And use of the background-attachment:fixed css is very nice and it keeps the background image at fixed place as long as the element height enough for scrolling.
I was also make a demo for you to understand clearly, in below image you can see the css icon stayed fixed when i moved the scrollbar just assume in image but you can see the code and run it by making the html file locally.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Fixed Position Background Image Css</title>
<script src=”http://code.jquery.com/jquery-1.10.2.min.js” type=”text/javascript”></script>
<style>
body{
font-family:Verdana, Geneva, sans-serif;
background:url(‘css-icon.png’) Â 70% 50% no-repeat fixed;
background-attachment:fixed;
}
</style>
</head><body>
<div style=”width:450px;height:800px;margin:auto;padding:50px; “>
<form  onsubmit=”return submitform(this);”>
<h2>Fixed Position Background Image Css Demo</h2>
<div>
<p>Paragraph1 <br/></p>
<p>Paragraph1 <br/></p>
<p>Paragraph1 <br/></p>
<p>Paragraph1 <br/></p>
<p>Paragraph1 <br/></p>
<p>Paragraph1 <br/></p>
<p>Paragraph1 <br/></p>
<p>Paragraph1 <br/></p>
<p>Paragraph1 <br/></p>
<p>Paragraph1 <br/></p>
<p>Paragraph1 <br/></p>
<p>Paragraph1 <br/></p>
<p>Paragraph1 <br/></p>
<p>Paragraph1 <br/></p>
</div>
</form>
</div></body>
</html>
