WWW FAQs: How do I add a background image to my web page?

2004-08-25: The modern way is to use styles to set the background image for the body element of your page, like this:

<body style="background-image: url(background.png);"> Body of page goes here </body>

The resulting background will repeat, just like backgrounds set with the old bgsrc attribute of body, which is now discouraged in favor of using styles. You can change the repeating behavior using additional styles. For more information, see How do I stop page backgrounds from scrolling or repeating?

Page backgrounds can be really, really irritating. Users hate them when they are distracting. Before you use a background image on your page, try reading a long document on a page with that background. If it bothers you even a little bit, don't use the background.

Share |

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!