Use the background-attachment property to set the background image to either move with the text or to remain fixed as the user scrolls. To set the background to remain stationary while the user scrolls the webpage, specify the background-attachment property with the value fixed.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Holiday Gift Guide
Holiday Gift Guide

Set a Fixed Background Image

Use the background-attachment property to set the background image to either move with the text or to remain fixed as the user scrolls. To set the background to remain stationary while the user scrolls the webpage, specify the background-attachment property with the value fixed. An example of this is shown below.

<body style="background-image: url(imagename.jpg); background-attachment: fixed;">

In the following examples, rather than actually setting the background-attachment property to the webpage that you're looking at, I'll show you how to set the background-attachment of a <div> element used as a text area.

I'll use some style properties to style the div, which are not related to scrolling or fixing the background. In order to simplify things, I won't be repeating those properties in the example code. I list them below just for your information.

width: 400px;
height: 100px;
padding: 10px;
margin: 10px; 
border-style: solid;
border-width: 1px;
font-family:verdana;
font-size: 10pt;
overflow: auto;

To set the background image to scroll with the text, set the background-attachment property to Scroll An example of this is shown below.

<style type="text/css">
.scrollArea
{
background-image: url(bg000251.jpg);
background-attachment: scroll;
}
</style>

<div class="scrollArea">
"Who are you?" said the Caterpillar. This was not an encouraging opening for a conversation. Alice replied, rather shyly, "I - I hardly know, sir, just at present - at least I know who I WAS when I got up this morning, but I think I must have been changed several times since then." "What do you mean by that?" said the Caterpillar sternly. "Explain yourself!" "I can't explain myself, I'm afraid, sir" said Alice, "because I'm not myself, you see." "I don't see," said the Caterpillar. "I'm afraid I can't put it more clearly," Alice replied very politely, "for I can't understand it myself to begin with; and being so many different sizes in a day is very confusing." - Alice's Adventures in Wonderland by Lewis Carroll.
</div>

"Who are you?" said the Caterpillar. This was not an encouraging opening for a conversation. Alice replied, rather shyly, "I - I hardly know, sir, just at present - at least I know who I WAS when I got up this morning, but I think I must have been changed several times since then." "What do you mean by that?" said the Caterpillar sternly. "Explain yourself!" "I can't explain myself, I'm afraid, sir" said Alice, "because I'm not myself, you see." "I don't see," said the Caterpillar. "I'm afraid I can't put it more clearly," Alice replied very politely, "for I can't understand it myself to begin with; and being so many different sizes in a day is very confusing." - Alice's Adventures in Wonderland by Lewis Carroll.

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268