Brought to you by Style Master CSS editor

5. Background colors and images using CSS

We have a nice, pristine style sheet, itching for some rules.

Now what?

One of the first things we do when we set up the appearance of a web page, is to set the background. For whatever reason, the default color of a web page background is a ghastly gray (your opinion as to its aesthetic qualities may vary).
We need to get rid of that straight away (otherwise the first visitor to your site will think it was developed in 1994).

Our First Rule

A style sheet is simply a set of rules, which determine which elements are to be affected by the rule, and define how any affected elements should appear.

Creating the Selector

In this case, we want to affect the appearance of the <BODY> element of the page. When creating a rule, we first need to create a selector that specifies which elements the rule applies to.

For simple elements, that is, any HTML elements, such as <BODY>, <P>, <A>, <LI>, and so on, the selector is very simple, just the name of the element, without its angled brackets.

So,

the selector for <P> elements is P
the selector for <A> elements is A
the selector for <LI> elements is LI

pop quiz 1

What is the selector for the <BODY>?

Creating the Properties

Now, once we've selected the body using BODY (you guessed the answer right?), we need to finish off the rule by telling the browser how this should be drawn.
In this case we want to set the background color of the body to a particular value.
Here is one of the hard parts of style sheets: prodigious feats of memory. There are literally dozens of properties, which can take all kinds of different values. In the last part of these lessons, I have added some links to various resources that can make life a little easier. Among these are some web based references to all the properties and their possible values.

In the case of background color, the property is called background-color. Let's give the background a nice aqua color, say #66CC99. You give a property a value by using the following syntax, background-color: #66CC99 - the property and its value are separated by a colon, then a space. Lastly, all of the properties associated with a selector are wrapped up in braces, to make a rule. In this case,

BODY {background-color: #66CC99}

And now you have created your first rule.

Save the style sheet, then open your web page (the one we created last lesson) in a browser.

Behold a colored background? If not, check the following:

Do you have a version 4 browser?
Is your style sheet in exactly the same folder as the HTML file, and has exactly the name core-style.css?
Is your syntax correct?
If you are using Navigator, is Javascript enabled?

Completely baffled? Remember, there's no shame and little expense in using a CSS Editor.

Background Images

Let's get a little fancier, adding a background image. We are also going to see the first example of how style sheets give you more than plain HTML when it comes to style.

First we'll specify a background image, then look at these additional features.

Our BODY already has a single property, we simply want to add to this list. The background-image property lets us specify the image behind an HTML element (that's right, elements other than the body can have backgrounds too).

Additional properties for a rule also appear inside the curly braces. Each property is separated by a semicolon. URLs in style sheets are specified in a particular way, using a syntax of the form, url(../gifs/body-bg.gif). Of course a relative or absolute URL is inside the brackets.

So the background image property is specified by

background-image: url(../gifs/body-bg.gif)

To include this in the rule we created above, we place it inside the braces, and separate the two properties with a semicolon ";".

BODY { background-color: #66CC99; background-image: url(../gifs/body-bg.gif) }

We can add whitespace, like tabs, spaces or returns for legibility, because style sheets ignore any non essential whitespace.

Before we go on, let me note that there is serious bug in Navigator 4, which means that relative URLs are treated as relative to the page (HTML file) not the style sheet. For the background image to appear in both Navigator 4 and Explorer 4, the HTML file and the style sheet file must be in the same folder, at the same level.

Save your style sheet, then preview your page in a browser.

We've now created a rule that gives the body of a page a background color, and a background image. Let's take a look at these new style sheets features I alluded to above.

Beyond Tiling

With HTML, background images tile, that is, repeat vertically and horizontally down and across a page.
Style sheets let you have much more control over how a background image is displayed.

With style sheets, you can specify whether a background image appears once, or tiles - either like traditional background images, or only horizontally or vertically.
The background-repeat property determines which of these options takes place. background-repeat can take the values no-repeat, repeat, repeat-x, repeat-y.

The image can also appear in a particular position on the page (say centered, or fixed in the bottom left of the page). Tiling can also begin at a specified location, not simply in the top left hand corner.
The background-position property determines where the image is positioned.

background-position is a little more complicated, but for the simple purpose of creating a centered image we can use the keyword value center .

Exercise 1

Now, try creating additional properties that specify how the background image of our body will repeat, and be positioned.
Remember to separate each new property from the previous with a semicolon.

You'll find my example answer at the end of the lesson.

Special Note
background-position is not supported by Netscape Navigator 4. The image is always in the top left hand corner of the page. background-repeat does work however.
Both these properties work in Internet Explorer 4.

Save your style sheet, and preview your handy work in a browser.

What have we learnt this hour?

The most important thing we learnt was how to make rules. A rule comprises a selector (in this case we learnt about HTML element selectors, soon we will learn about others), and a set of properties.
Along the way, we learnt about the background properties available in style sheets.
And we got an important reminder that all is not perfect in the world of style sheet support in the major browsers.

Next we will learn about text, setting a default style for the page, as well as setting up headings.

Answer to Exercise 1

Here is my go, where I place the background image in the center of the page, and don't repeat it. This gives a nice watermarking effect.

BODY { background-color: #66CC99; background-image: url(../gifs/body-bg.gif); background-repeat: no-repeat; background-position: center }