WWW FAQs: How do I stop page backgrounds from scrolling or repeating?

2004-08-25: the old-fashioned way to set a page background image is to set the bgsrc attribute of the body element, like this:

<body bgsrc="background.png">
Body of page goes here

The trouble is that if the page goes on long enough, or is wide enough, the image background.png will be repeated ("tiled") throughout the page. Also, if the user scrolls the page, your background image will also scroll. If you do not want either or both of these things to happen, you will need to take a more modern approach, using styles rather than the bgsrc attribute:

<body style="background-image: url(background.png);
 background-position: center;
 background-repeat: no-repeat;
 background-attachment: fixed;">
Body of page goes here

Styles provide more precise control and are the preferred method in modern browsers. One can also do this even more elegantly using a style sheet separate from the page.

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!