CSS Learn Tuesday, March 17, 2009
Fixed background image with CSS
May be you was impressed when you've see a web page with non-scrollable background image (fixed position).
Now you can create your own fixed background. Your HTML code must looks like this:
If you load this page and have a lot of content, when scroll down the image will not move.
Keep CSS-ing.
Now you can create your own fixed background. Your HTML code must looks like this:
<html>
<head>
<style type="text/css">
body {
background-image: url('background.gif'); /*the choice of background is yours*/
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>Type your text here or fill with content</p>
<p>Type your text here or fill with content</p>
<p>Type your text here or fill with content</p>
<p>Type your text here or fill with content</p>
<p>Type your text here or fill with content</p>
<p>Type your text here or fill with content</p>
<p>Type your text here or fill with content</p>
<p>Type your text here or fill with content</p>
<p>Type your text here or fill with content</p>
<p>Type your text here or fill with content</p>
<p>Type your text here or fill with content</p>
<p>Type your text here or fill with content</p>
<p>Type your text here or fill with content</p>
<p>Type your text here or fill with content</p>
</body>
</html>
If you load this page and have a lot of content, when scroll down the image will not move.
Keep CSS-ing.
1 Comments:
mmm - very nice tutor. I used it
Post a Comment
Subscribe to Post Comments [Atom]
<< Home