Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

Set a Fixed Background Image

By Stephen Bucaro

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.

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.