logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Painting
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods


dailyclick
All times in EST

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

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;
}

…or:

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 Del.icio.us 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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2013 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


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor