FIXED POSITION BACKGROUND IMAGE CSS


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.
 

Fixed Position Background Image CSS

 

<!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>



Kalpesh Patel

Founder Of Nexus Software Group Leading IT solution and service provider and offering a full range of application development and I.T. consultancy services. Nexus Software Group Contributors In: post free ads online in India and post free ads online in USA