tutorialtastic

Customising the Page Background

This tutorial aims to educate you on the various elements and attributes you can set with CSS to your background, from positioning a background to making it repeat exactly how you want.

Firstly, what exactly are all of the background elements? This handy-dandy list shows you what you've got to work with (and also shows the correct order in which you can compress your CSS):

background-color
background-image
background-repeat
background-attachment
background-position

It's pretty obvious what background-color does — it sets the background colour of the page. You can assign a colour by name, RGB or hex. My preferred method is hex, because hex codes are reasonably short, and aren't restricted to a set amount like named-colours. Anyway, let's say you want to set your background colour to blue (I don't recommend it!) Here's how you'd do that:
With its name:
background-color: blue;

With RGB:
background-color: rgb(0,0,255);

With its hex value:
background-color: #0000FF;

Pretty simple, yeah? Next, setting a background image. Let's assume you want to add some yellow stars to your blue background to create a starry sky effect. You've already got the image which you've called "yellowstars"; you've saved it as a .gif. The code to call that image as a background is as follows:
background-image: url(yellowstars.gif);

..and now to combine that with the blue background:
background-color: #0000FF;
background-image: url(yellowstars.gif);

If you're like me and store your images in a seperate directory (must keep tidy at all times), simply add the name of the folder and a slash before the file name. For example, if you store your background in an "images" folder, you'd just change the CSS code from url(yellowstars.gif); to url(images/yellowstars.gif);.

Now my favourite: background-repeat. With this bit of coding, you can make a background repeat only horizontally, only vertically, both (tiling, basically) or not at all. Vertically repeating backgrounds are good for those two-column blog layouts if you're not absolutely sure how to set one up any other way. To continue with your starry sky effect, you'd want the stars to tile as there aren't exactly rows or columns of stars in the sky. I'll add the correct piece of code to what we've already got:
background-color: #0000FF;
background-image: url(yellowstars.gif);
background-repeat: repeat;

It really is that simple. Now as far as I'm aware, most browsers repeat in all directions as default, so you don't really need to use background-repeat: repeat;, but the CSS validator might add it in to compressed CSS anyway.

If you want a background to repeat horizontally across a page (from left to right), you would simply change "repeat" to "repeat-x", like so: background-repeat: repeat-x;. If you want a background to repeat vertically down a page (from top to bottom), you can use: background-repeat: repeat-y;. Note: the repeat element only works in conjunction with background images. You cannot get a background colour alone to repeat down/across a page.

The no-repeat function is ideal for large backgrounds that are being used as a feature of a layout. I also occasionally use them to replace text for headers with images over at my personal website.

Another great background attribute is background-attachment. Although I think it's badly named — surely an attachment used as a background is just a background image — it can come very much in handy. Background-attachment defaults to background-attachment: scroll;, which you'll probably see working on most sites. If you visit a page and the background appears to scroll up/down when you move the scrollbar — the background is set to "scroll". I prefer background-attachment: fixed; — this keeps the background image in place even when a user scrolls up and down. If you have a tiling background, it is up to you whether you let it scroll or not, although I recommend using "fixed" in most cases.

Last of the background attributes is background-position. This can be both frustrating and exciting all at once. This beauty can allow you to center your background without having to fiddle with silly whitespace in an image — what a great idea! Background-position accepts three types of value — percentages, pixels and named values. Percentages are the frustrating ones. Calculating where abouts down a page "41%" is can be a pain in the bottom. This is why I tend to use named values (which are a little restricting), or pixels. These are the named values:

"top left" positions your background in the top left corner, "top center" positions your background at the top in the middle of the page and so on. Bear in mind that if you assign a background to the bottom right hand corner — as the screen resolution increases, the further away it will become from your content (unless you use a fluid layout style). This is how you set out the code:
background-position: top left;

Pixel values are the most flexible and easiest to use in terms of background positioning. Instead of trying to guess with percentages, or settling for top, middle and bottom — you can place the background anywhere you want on a page. If you're looking for 100% accuracy, screenshot the browser and carefully measure from the top of the page to where you want your background. Alternatively, just do what I do and fiddle until it's right. Here's how you set out the code:
background-position: 35px 210px;

Obviously you've got to change "35px" and "210px" into the values you want. Always enter pixel values based on how far away you want the background from the top left side corner. So, using the code above, the background would be 35 pixels from the top, and 210 pixels from the left side.

Let's propose that you have assigned a value to all of the background properties that we've covered. Your code is going to look a little something like this:
background-color: #0000FF;
background-image: url(yellowstars.gif);
background-repeat: repeat;
background-attachment: fixed;
background-position: top left;

Five lines of code just for your background?! I wouldn't settle for that — what a waste of space! This is where you should learn to compress your CSS. Basically, you need to combine all of the values into one long string of text, seperating each value with a space. Those five lines of code can be compressed, in the order they're defined above, to this:
background: #0000FF url(yellowstars.gif) repeat fixed top left;

That, in a nutshell, is the basic set of CSS background properties and how to implement them.

Tags: css, background,
Last Updated On: 05th February 06 by Jem
Bookmark At: StumbleUpon, Digg

tutorialtastic — ultimately better than pixelfx
Copyright © Jem Turner 2003-08. (About | Disclaimer | Link In)