Using A CSS Background

This tutorial shows you how to use CSS for a background or background image for your web page.

It's part of a complete free tutorial on how to create an HTML CSS template for your website.

Previous pages of the tutorial are:

I'm using KompoZer for this tutorial, which is a free web site editor.

Using Backgrounds

Having text in a light colored table (for readability) with a different colored background either side can make your web page look a lot nicer than having the entire screen one color.

You can use the background image command in CSS to use an image that gives a bit of texture to the background to stop it looking bland.

You can also use an image as the background, like having your page set in the middle of a picture. The picture can be fixed, it or can scroll with the page. You can change the opacity of the table your text is in so that the picture shows through faintly.

It sounds great, but there are downsides that you should know about.

The Downside Of Background Images

I don't see much wrong with the idea of a smallish tiled background image to give the background a bit of texture instead of having a solid color like the blue on this page.

Putting a large picture as the background has a number of problems though.

It can be overpowering and distracting and take away from the message you're trying to get across.

The picture will probably have a large file size, making the page slower to load.

If you have it showing through the text even faintly, it can make the text harder to read for a lot of people. Have pity on your readers with less than perfect eyesight.

It will show up differently in different browsers and on different computers. It may look great on your computer, and not so good on someone elses. Particularly, if you have the picture showing through the text it may be faint and readable on your setup, but the image may be darker and the text harder to read on a different computer and browser.

The picture will show differently for different sized monitors and resolutions. It may be a single picture in some cases and tiled in others.

I would only use a picture as a background in special circumstances. If you do use one, check it out on as many browsers and computers as you can.

Setting a CSS Background

To set a CSS background fire up KompoZer and open your web page. Click on Tools in the top menubar, then CSS editor.

If you have Body listed in the left pane click on it, otherwise click on the palette icon at the far left of the top menubar, then in the right pane you should see New Style Rule with a number of options. Select Style applied to all elements of type, then click the button at the right of the empty text box below. Select Body. Then click Create Style Rule.

Body should appear in the list in the left pane.

To set a plain background color click on Background in the top menubar then click in the little box to the right of the empty Color text box. A color chart will appear and you can choose whatever color you think is appropriate.

It doesn't matter how dark it is because the main table will have a light color for readability.

Setting A CSS Background Image

To use a CSS background image follow the steps above except instead of choosing a color click on Choose File to the right of the Image text box.

You should have already have an image that you want to use for the background image.

Browse to the image and select it and you should see it appear on your page immediately. Then choose the options you want, how it's tiled, whether or not it scrolls with the page, and its position on the page.

Whether you're using one large picture or a smaller tiled image, you'll probably find it takes a bit of work to get it looking as nice as you'd like.

Use Your Time Wisely

If you're time challenged you need to keep focused on what's most important, and that's the actual content on your site. That's what your visitors are most concerned with.

A background color is quick, easy and suits most sites while using a CSS background image can take a lot more work and may not make any difference to the bottom line. So use your judgment as to the best use of your time.

Return from Setting A CSS Background to Creating A Website Template