The Netlobo logo - a Nevada desert landscape

CSS background-image Tutorial

A tutorial about the CSS background-image property and other background related CSS properties

Published Aug 9, 2005 by lobo235
Last updated on May 19, 2009

The background-image CSS property is a very useful one that will allow you to make your site very pleasing to the eye. In this tutorial you will learn about the CSS background-image property and how to use it. I will provide a few different examples to show how it can be used.

There are a number or HTML elements that you can add a background image to. For example, you can set a background image for your whole HTML body, menu options, tables, divs, and so on. The benefit of setting the background image with CSS is that you have more control over how the background image is displayed. Using CSS you can make the background repeat itself or not, and you can also tell it whether you want it to repeat vertically (Y-axis) or horizontally (X-axis). You can also position the background image so it looks just right on your web pages or even make the background fixed so it does not scroll.

Setting a background image using CSS

To set a background image with CSS you can use the following example. Place this into an external CSS file.

.bgimage {
    background-image: url("bg.gif");
}

Change "bg.gif" to whatever image you want to use as the background. You could also use a full url instead of just the image name. For example, you could have "http://www.netlobo.com/images/content-bg.gif" and it would work just fine. Now, any HTML element on your page that has the bgimage class will have the image you specified as it's background.

Changing the background repeat using CSS

In some cases you may not want the background image to repeat itself or you may want it to repeat vertically (Y-axis) or horizontally (X-axis). The CSS background-repeat property will allow you to change the way the background image repeats. Look at the following examples:

.bgrepeat {
    background-image: url("bg.gif");
    background-repeat: repeat;
}
.bgnorepeat {
    background-image: url("bg.gif");
    background-repeat: no-repeat;
}
.bgrepeaty {
    background-image: url("bg.gif");
    background-repeat: repeat-y;
}
.bgrepeatx {
    background-image: url("bg.gif");
    background-repeat: repeat-x;
}

The bgrepeat class will repeat the background along both the X and Y axis which tiles the image across the whole background. The bgnorepeat class will not repeat the image; It will only display once. The bgrepeaty and bgrepeatx classes will tile the background image on the Y axis and X axis respectively.

Setting the background image position using CSS

It may be necessary at times to change the starting position of your background image. The background-position CSS property will allow you to do this. Take a look at these examples:

.bgbottomright {
    background-image: url("bg.gif");
    background-position: bottom right;
}
.bg25percent {
    background-image: url("bg.gif");
    background-position: 25% 25%;
}
.bg50px {
    background-image: url("bg.gif");
    background-position: 50px 50px;
}

As you can see, you have a number of options when using the background-position CSS property. The words you can use are top, bottom, left, right, and center. You can use either one or two words, if you only use one word the second will be set to the default of center. If you use a percentage or pixel value, the starting point (0% 0% or 0px 0px) is the top left corner of the element.

Changing the background attachment using CSS

By changing the background-attachment CSS property you can make your background image fixed so that it does not scroll with the rest of the page. Here is an example:

.bgfixed {
    background-image: url("bg.gif");
    background-attachment: fixed;
}

As you can see, there are many options when you set a background image. Try experimenting with some of the CSS properties above to style your web pages easily. If you have any questions or comments, please let us know.

4 comments for this article.

del.icio.us logo add this article to del.icio.us! Other great Web Development and Programming articles on Netlobo.com:
How to test your PHP scripts
Delete Confirmation using Javascript
Disable Form Buttons and Other Elements with Javascript