CSS and Backgrounds
Once you've set up boxes around all your elements you'll more than likely want to add backgrounds to them. In this tutorial I'll be going into the properties that give colour to your layouts, and let you control your background images. You will soon be able to control the background colour and image of all your elements.
This page was last updated on 2012-08-21
Background Colours
Before CSS, you could only add background colours to the whole page or to a table. Now, as you would expect, you have full control over what gets a background, even down to a single word. The CSS property for all this is background-color. Look here:
div.summary {background-color: green; }
At the risk of sounding repetitive, you can specify your colours using HEX or a name, as always. But hark! There is a further way of defining colours in CSS — RGB. This method should be familiar to those among you familiar with graphics programs like PhotoShop. You can specify the exact amount of Red, Green and Blue (the three colour components of light) in your colour. A typical line would look like this:
b {background-color: rgb(0,108,64); }
The range for each value of RGB is from 0–255. Older browsers won't understand this notation, but anything that supports stylesheets supports this too. And it's not just background-color that you can use this for; anyplace that once took HEX can now take this.
Background Images
You can also add an image as a background to anything on your page. Your property for all this is background-image.
p.intro {background-image: url(../images/tile.gif); }
You have to add the image's filename (which can be defined relatively or absolutely) in parentheses. Your image will tile behind whatever text or element you've added it to. You can add a background to an entire page by adding this CSS to the body. As you should have done before, whenever you specify a background image you should also add a similarly-coloured background colour to preserve legibility.
sourcetip: You may see some sites using quote marks as well as the parentheses around the URL of the image they’re using as a background, as in
background-image: url("image.png");
This is unnecessary and advised against, as it causes IE/Mac to cough and splutter. Leave the quotes out.
Background Control
Not only can you add backgrounds to anything, you can control exactly how this image is displayed. For one thing you can get past the age-old problem that background images always tile (repeat) — now you can specify whether they repeat sideways, up and down, or not at all. The property is background-repeat.
p {background-image: url(../images/tile.gif); background-repeat: no-repeat; }
That would cause the image to appear just once in the top-left of the paragraph, like so. Other values you can use are repeat-x which makes your image tile horizontally for one row, or repeat-y which makes it repeat downwards one column. To set this back to the default tile-both-ways, set this to repeat to override any other values.
You can also tamper with that long-established rule that your background always moves with your page when you scroll around. You had an IE-only tag in recent times that allowed you to achieve this (bgproperties="fixed"), but now this is part of the CSS standards so you should use this instead. Your property for this one is background-attachment.
body {background-image: url(../images/tile.gif); background-attachment: fixed; }
This CSS works best if put into the body tag, but in high-conformance browsers (think Netscape 6) you can add a non-scrolling background image to anything, which can look quite striking. You can go back to the default with scroll. None of this non-scrolling malarkey works in Netscape 4... no surprises there.
You can also specify the position of your background behind the element it is applied to — i.e. where it starts to display from. There are keyword values — top, center, bottom, left and right — to align the background to a corner of the screen.
p {background-image: url(tile.gif); background-position: right bottom; }
You can also push the image away from the top-left corner with units (pixels, for example). This is a very precise positioning method. You can specify horizontal and vertical starting points like so:
p {background-position: 60px 15px; }
You can use any of the length units discussed in CSS so far, and can integrate this property with the repeat properties above to get the effect you want perfectly.
The Shorthand Property
Using the shorthand background property you can set all the above values for your background in one declaration. This is useful as it is more efficient than specifying each one individually if you're going to be modifying them all. Plus, this is the only CSS command that IE3 understands. With the background command, you specify background color, background image, tiling method, scrolling or fixed status, and position all in one swoop. Here's some example code:
body {background: #cc33ff url(images/background.gif) repeat-x 20% 5%; }
The order you put the values in doesn't matter, any value that isn’t specified will take on its inherited or default value.
