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 & Owner at Aarav Web Solutions . Working for business development related to Web Design & Development. Also working with client in India & for outsourcing projects. Visit our website Aarav Web Solutions to see more about completed projects for clients. Focus in product development and we have developed our two own product listed below: Classified Website In India and Deals & Offer Website In India