If you don’t know any CSS at all, you might want to check out the CSS Cheat Sheet before reading further. Changing backgrounds is pretty basic, but a little extra understanding won’t hurt.
Basic Backgrounds
Recolouring a background is easy enough: put body{background-color:#ffffff;} in your stylesheet, with whatever colour you want in place of the #ffffff.
Background images work in a similar way: body{background-image:url(background-image.png);}, with the name of your background image in the parentheses. By default, the image will repeat – you can change this by adding the background-repeat declaration, for example:
body{
background-image:url(background-image.png);
background-repeat:no-repeat;
}
To move the image away from the centre, use the background-position declaration: body{background-position:left top;} will align the image to the top left corner. You can get pixel-specific if ‘left top’ isn’t accurate enough: background-position:20px 100px; will put the background image twenty pixels from the left and a hundred pixels from the top.
It’s usually a good idea to specify a background colour even if you’re using a background image. The background colour will show if the image has transparent sections or doesn’t repeat over the whole screen anyway, but even if the image covers the entire screen, a background colour will come in useful if there’s ever a problem which prevents the image from loading.
If your code’s starting to feel a bit long, you can combine the background declarations. body{background:#ffffff url(background-image.png) no-repeat left center;} works the same as body{background-color:#ffffff;background-image:url(background-image.png);background-repeat:no-repeat;background-position:left center;}, and is significantly faster to type.
You don’t need to save all your cool backgrounds for the overall body, either. They can be used for everything from major columns to a few selected words, just by changing the chosen selector. blockquote{background-image:url(quote.png);} or something similar is commonly used to add a quotation mark image to blockquotes. strong{background-color:#f0e9a7;} will add a bit of colour to your any bold words in your text.
For greater precision, use IDs or classes: p.tip{background-color:#f0e9a7;} will only change the background colour if you specially mark a paragraph with <p class=”tip”>.
More Background Tricks
Attachments: Usually a background image will move along with the rest of the page as users scroll through the content. Use background-attachment:fixed; to keep a background in one place.
Lists: Bullet lists are normally marked with, well, a bullet. And a rather plain and ordinary one at that. This can easily be replaced with a bullet-sized image. Remove the old bullets with ul{list-style:none;} and add in the new ones with ul li{background:url(bullet.png) left top no-repeat;}. Unless your bullet image is very thin, you should also include padding-left: in your ul or li attribute, set wide enough to indent your list properly so the text doesn’t overlap the bullet image.
Gradients: CSS-generated gradient backgrounds are supported by most modern browsers and are popular on many types of websites. The trick is getting the gradient to work on all browsers – while many browsers support CSS gradients, they don’t use the same code. Chrome uses a -webkit prefix, Firefox needs -moz-linear, and (current) IE uses -ms-linear. (Old versions of IE use some kind of mess which i will not even attempt to interpret.) It’s probably a bit of a cop-out to not include a proper description of creating CSS gradients, but they’re worthy of an entire article on their own. CSS Tricks has a solid article on CSS gradients, and gradient generators exist to create the code for all browsers at once.
Looking for some good background colours (or any other colour to spice up your website)? You don’t need to stick with boring black-and-white! I can create a great five-colour website colour scheme for you. For $5, you can have a unique new website colour scheme.
