CSS Backgrounds

Quite often you’ll want to use CSS to control the background of an element. When it comes to backgrounds, CSS has it covered, far more than just standard HTML can.

The first thing that springs to mind when you think of CSS backgrounds is styling the background of a page. This can be done, but is by no means the scope of CSS background control. (Nearly) any element can have a background, and that background might not neccessarily be an image, it could be a colour. Let’s take a look at a typical example:
body{ background-color:black; }
Pretty self-explanatory really, you’ll get a black background on body, which is the entire page. The same works for links and all sorts of elements too:
a{ background-color:black; color:white; padding:10px; }
The above will give you a black blox with white text for your links.

Now let’s take a look at background images.
body{ background-image:url('images/back.jpg'); }
The above will simply tile the ‘back.jpg’ image on the element, which in this case is the page.

Unlike with pure HTML, CSS can control the way the browser displays the background image. Let’s say I have a image of a gradient, going from light grey to white. I want this to be at the top of the page.
body{
  background-image:url('images/back.jpg');
  background-repeat:repeat-x;
}
This code will display the same image and tile it, only the tiling will only appear horizontally, not vertically. The same command can be used with the opposide effect, making it vertical, not horizontal. background-repeat:repeat-y;. You can, of course, stop the background from tiling. background-repeat:no-repeat;.

What if you don’t want the background at the top of the page? You can control this with CSS too.
body{
  background-image:url('images/back.jpg');
  background-repeat:repeat-x;
  background-position:bottom;
}
This will display the image at the bottom of the element, rather than the default top. Other values include ‘top’, ‘right’ and ‘left’.

Taking it even further, we can have the background scroll with the page. This works with all elements that support the background attribute, so be careful if using it on overflowed div’s and p tags, and you might get some unexpected behaviour.
background-attachment:fixed;

In our experience there is no effect that cannot be created with these set of attributes.