CSS Basics: The Background Properties

Last week I briefly touched on a few selector properties when styling hyperlinks. I’m going to start to go into more properties. These properties can be used on any selector (although not every property will necessarily have an effect on some selectors).

CSS Selectors

Just to recap, a selector is the tag, id or class you’re targeting eg.

h1 { ... }
#idname { ... }
.classname { ... }

and multiple selectors can be used, using a comma to separate them

h1, #idname { ... }

or you can target a selector more specifically with a space between each descendant

body div h1 { ... }

Properties and Values

In the rule set for the selector(s) you have properties and values. An example ruleset is

selector {
    property: value;
    property2: value1 value2;
}

The Background Properties

A background can be changed on virtually any selector, although it’s not always wise to do so! You can change the background to a different colour, or have an image displaying instead.

The background properties allow you to change the background colour and/or image of the selector. The individual properties and their values are listed below.

background-color

Allows you to set the background colour of the selector. Accepts a hexadecimal colour eg. #aabbcc (when you have matching pairs, this can also be written as #abc), specific colour names eg. white, black, RGB colours eg. rgb(255, 255, 255). Finally it can also accept the value ‘transparent’. e.g.

h1 { background-color: #000; }
h2 { background-color: black; }
h3 { background-color: rgb(0, 0, 0); }
h4 { background-color: transparent; }

background-image

Background images are most commonly seen on the body selector, however they can be used on plenty of other selectors too. This property accept ‘none’ or a url to a background image eg.

body { background-image: none; }
body { background-image: url(/path/to/images/background.gif); }

background-attachment

Allows you to control whether a background image is fixed or scolls with the page. Accepts two values – scroll or fixed. When you fix a background it is fixed to the viewport and not to the selector, regardless of which selector is used.

body { background-attachment: fixed; }
body { background-attachment: scroll; }

background-position

Controls the starting position of the background image. Typically a background will be fixed to the top left corner (0,0 – x,y co-ordinates), however with this property you can change this starting point using co-ordinate positions with a measurement, percentages for the horizontal and vertical positioning, or keywords – top, bottom, left, right and center. e.g.

/* would start the background image at 100px from the top and left side of the browser */
body { background-position: 100px, 100px; }
/* both of the following would start the image halfway across the page and at the top */
body { background-position: 50% 0%; }
body { background-position: center top; }

background-repeat

This controls how the background image is repeated. The options are a continual repeat/tiling, which is default, then you have the option of no repeat, to repeat horizontally only, or to repeat vertically only. e.g.

/* This sets the background image to repeat */
body { background-repeat: repeat; }
/* this would repeat the image horizontally from the starting point */
body { background-repeat: repeat-x; }
/* this would repeat the image vertically from the starting point */
body { background-repeat: repeat-y; }
/* this would display the background image just once, at the starting point specified by the position property */
body { background-repeat: no-repeat; }

The Shorthand Property

Using the properties above you could set the background of a body selector to be white, display a fixed background image and have it repeating down the right hand side of the page using the following ruleset:

body {
    background-color: #fff;
    background-image: url(/images/backgrounds/background.gif);
    background-attachment: fixed;
    background-position: top right;
    background-repeat: repeat-y;
}

However, that’s a lot of typing for one ruleset! Luckily we also have a short hand property that can combine one or more of these properties. The background property accepts one or more of the values used above, in no strict order. So to replicate the above we could use

body {
    background: #fff url(/images/backgrounds/background.gif) fixed top right repeat-y;
}

If we just wanted to set the background colour we could use

body {
    background: #fff;
}

Alternatively, you could just set a background image to display in the top left of the screen, once.

body {
    background: url(/images/backgrounds/background.gif) fixed no-repeat;
}

Next week I’ll be explaining how you can style your text, however to allow you to get started with using the background property you of course need to be able to ensure your text can be read on top of it! So to do this we use the color selector, seen last week with styling links. To set the text colour of any selector we use this property. So for example, a white background with black text, and then paragraphs with white text on a black background could be

body {
    background: #fff;
    color: #000;
}
p {
    background: #000;
    color: #fff;
}

Whatever you do, just make sure your text is always readable. As a guideline from the W3C, if you set a background colour you should always set a font colour (with enough contrast between to the two), and vice versa. This is to ensure that no defaults get in the way, or if you also set a background image, and the image didn’t display, then you would have a suitable background colour to ensure the text can be seen.

For a good example of how backgrounds can be used have a look at Eric Meyer’s Complexspiral Demo.

Written by Sarah from Stuff By Sarah
Posted on November 27th, 2008 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

2