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


Using CSS to Set a Background Image

Guest Author - Elizabeth Connick

Ever wonder how websites manage those pretty designs and pictures floating behind the text? It's all done through the magic of Cascading Style Sheets. CSS not only allows you to designate an image for your page's background, it also lets you tweak how the image is displayed so that you can get just the look you want.

The fundamental building block for your background image is, fittingly enough, the 'background-image' property. You use this property to tell your site where the image file is located, as follows:

body {
background-image: url ("image.gif");

That's all you need to do to place a background image for your web page. Of course, you'll probably want to customize how the image appears. Let's say you want your image to start at the top of the page but to be centered horizontally instead of left-aligned (the default alignment). In that case, you will want to add the 'background-position' property to your CSS rule:

body {
background-image: url ("image.gif");
background-position: center top;

When defining the 'background-position' property, the first value sets the horizontal alignment (left, center or right) and the second sets the image's vertical alignment (top, center or bottom).

Next, you decide that you want to stop the image from tiling (repeating itself) horizontally, although you do want it to tile vertically. It's time to bring out the 'background-repeat' property:

body {
background-image: url ("image.gif");
background-position: center top;
background-repeat: repeat-y;

Setting the value to 'repeat-y' tells the browser to tile the background image along the y-axis, aka vertically, but not the x-axis (horizontally), which is exactly what we wanted. If you wanted to tile it horizontally but not vertically you would use the 'repeat-x' value instead; if you didn't want the image to tile at all, give it the 'no-repeat' value. The default value is to tile the image both horizontally and vertically, so if that's the best choice for your image you don't need to set the 'background-repeat' property at all.

Finally, you can take a look at the 'background-attachment' property. By default, your image will scroll as the page scrolls, so if you are not repeating the image vertically and you have a long page your image will not extend to the bottom of the page. You can change this by setting the 'background-attachment' property to 'fixed,' which causes the background image to stay in the same spot on the monitor regardless of how the page scrolls. Now your background image rules will look like this:

body {
background-image: url ("image.gif");
background-position: center top;
background-repeat: repeat-y;
background-attachment: fixed;

If you want to keep your CSS rules as small as possible, you can combine all of your background values into one line by using the 'background' property, like this:

background {
url ("image.gif") repeat-y fixed center top;

When using the 'background' property you must list the values in a specific order:
[background-color (if used)] [background-image] [background-repeat] [background-attachment] [background-position]. You can leave out any value that you don't need, you just need to list any values that you do use in the proper order or the rule won't work.
This site needs an editor - click to learn more!

Add Using+CSS+to+Set+a+Background+Image to Twitter Add Using+CSS+to+Set+a+Background+Image to Facebook Add Using+CSS+to+Set+a+Background+Image to MySpace Add Using+CSS+to+Set+a+Background+Image to Digg Using+CSS+to+Set+a+Background+Image Add Using+CSS+to+Set+a+Background+Image to Yahoo My Web Add Using+CSS+to+Set+a+Background+Image to Google Bookmarks Add Using+CSS+to+Set+a+Background+Image to Stumbleupon Add Using+CSS+to+Set+a+Background+Image 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