g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g HTML Site

BellaOnline's HTML Editor


Setting Your Webpage Background

Guest Author - Elizabeth Connick

Many websites can benefit from a bit of sprucing up, in the form of a background image or color change. They are quite easy to implement, but beware; it's also easy to fall in love with an image and post it as your site's background, without realizing that your "improvement" makes the page text unreadable!

There are two ways to set your page's background: using pure HTML, or with a style sheet. If your background is going to be shared across multiple pages, then by all means use the style sheet, as you can then post and update the background by changing one line of one page, instead of having to go into every page on your site and change the code. If you're adding a background to one page only, the simplest way to implement it is to use the <BODY> tag.

To change your page's background color using HTML, simply alter the <BODY> tag like this:

<BODY bgcolor="red">

It's that easy! You can set your background color to any of the 16 HTML named colors by simply entering the color name with the "bgcolor" attribute. (For your reference, the 16 named colors are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.)

If you want to use a color that's not in the named colors list, you'll need to find the hexadecimal reference code for that color. The tag will look like this:

<BODY bgcolor="#FF0000">

… which will produce the same results as "bgcolor='red'" in the example above. Hexadecimal color charts are available across the web, including one at Wikipedia.

Setting a background image for your page via HTML is just as simple. You include the file path to your desired image as follows:

<BODY background="/images/background.gif">

… which tells the browser to use the background.gif image from the "images" folder on your server as the background for that page.

The body tag background attributes have been deprecated in HTML 4+ and XHTML, so the preferred method for setting backgrounds today is through CSS statements. You can set your page's background color via CSS with the following code in your page head:

body {
background-color: red;


body {
background-color: #FF0000;

Similarly, you can use CSS to set a background image and you'll have much more control over how the image displays. Your CSS statement will look something like this:

body {
background-image: url(/images/background.gif);
background-repeat: no-repeat;
background-position: center bottom;

The "background-image" attribute is required, and gives the background image file's location. With CSS you also have two optional attributes available to control your background image. The "background-repeat" indicates whether you want your background image to tile horizontally (background-repeat: repeat-x;), tile vertically (background-repeat: repeat-y;), or not to tile at all (background-repeat: no-repeat). The second optional attribute, background-position, has two arguments. The first affects where the image appears horizontally; you can choose between "left," "center," or "right." The second argument sets the image's vertical alignment; you can set this to "top," "center," or "bottom."
This site needs an editor - click to learn more!

Add Setting+Your+Webpage+Background to Twitter Add Setting+Your+Webpage+Background to Facebook Add Setting+Your+Webpage+Background to MySpace Add Setting+Your+Webpage+Background to Digg Setting+Your+Webpage+Background Add Setting+Your+Webpage+Background to Yahoo My Web Add Setting+Your+Webpage+Background to Google Bookmarks Add Setting+Your+Webpage+Background to Stumbleupon Add Setting+Your+Webpage+Background to Reddit

RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the HTML Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2018 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map


Past Issues

Note: BellaOnline uses cookies to help provide a consistent user experience. Our advertisers may use cookies to help customize ads. Please contact us with any question about our cookie use.

Summertime Foods
Corn on the Cob
Burgers on the Grill
Apple Pie


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor