Using A CSS  Background

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

It's part of a complete template tutorial on how to create an HTML CSS template for your website. I'm using KompoZer for this tutorial, which is a free web site editor.

Using Backgrounds 

Having text in a light colored table  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 a solid color as the background like this page, or you can use the CSS background image command to use an image that gives a bit of texture to the background to stop it looking bland. This is a small image that repeats itself right across the page. You can find free seamless background images on the internet, or make your own.

You can also use a large 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.


Problems With 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. 

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 page can slower to load because the picture will probably have a large file size.

If you have the background image 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 else's. 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.

Personally, I wouldn't use a large picture as a background. If you do use one, check it out on as many browsers, computers, and screen resolutions 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 will 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.


Setting the background color for about-armidale. I'm going for a light colored background for this.


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.


Setting The Table Background

When you use a color or image as a page background, you'll need to set a background color on your HTML table as well. Otherwise, your table will be the same color as the page background.

If you have the td style rule in the left pane of the CSS editor select that. If you don't, click on the palette icon in the top menu bar, select custom style rule, type "td" (without the quote marks) in the text box and click on Create style rule. td will appear in the left pane. 

Then it's just like setting the page background color. Select the background tab, 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.

Remember that dark text on a light background is best for readability. I'm just using white on this page, but any light color would work.


What's Best?

A background color is quick, easy and suits most sites.  A textured background using a small tiled image can look more upmarket, but it will take more work. A large CSS background image can take a lot more work, have problems with a large file size, and may not make any difference to the bottom line, though it may suit some types of website.

If you're time challenged I'd suggest you just use a solid background color, so you have more time to write the actual content.

Next Page: Setting table styles with CSS


Pages In The Template Tutorial



Return from Setting A CSS Background to the Website Template Tutorial Overview

Return to the How To Make A Website home page