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

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

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


Web Design Sections

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