html tutorials web design help css tutorials free web graphics diy search engine optimization

Fixed Backgrounds

A "fixed" background simply means it doesn't scroll with the page, the content scrolls over of the top of the background image, which remains stationary. You'll notice as you scroll down this page the background image doesn't scroll with the page.

With just HTML, the only option for the background image was to have it remain static so it didn't scroll with the page. With CSS, there are several more options available.

The background image can still remain static or scroll with the page, but it can also be repeated only across the top of page, down either side, or it can be positioned anywhere on the page and coded so that it doesn't repeat. Technically, you can have it tile across the bottom, too, but it's not very practical to do so.

Those tutorials are available in members site, this tutorial shows you how to have the background remain fixed in place when the page is scrolled. To lock the background in place so that it doesn't scroll, use this:

background-attachment: fixed;
...in your external or embedded style sheet. The possible values are: fixed or scroll. Scroll is the default value, so there's usually no need to code that value.

One additional note about backgrounds . . . I've received many emails from folks trying to create a design where the default page margins interfere with what they're trying to accomplish. You see, by default a browser takes about 22 pixels of space around the edges of the viewing window as the page margins. A background image will tile behind these margins but trying to place content up against the edge of the screen is impossible unless you remove the page margins. They can be removed, or changed, in the body element. To remove the margins, add this to your external style sheet:

body {margin: 0px;}
You can also set the margin on each side separately. Please refer to the Box Model tutorial and the Margins tutorial in the member site to learn about these items.
Back | Web Design Tutorials Index
Cheap Web Hosting

Ezine for Webmasters

Bookmark and Share

Almost a Newsletter

Subscribe today and get a free gift, The Science of Getting Rich. Learn more, or subcribe below:
Email:

First Name:

Privacy Policy

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]
See my fancy bottom! :)