Skip Navigation

Blog » Background Images for Beginners

Everything you ever wanted to know about using background images in CSS.

Many web sites, let's face it, are fairly bland (yes, including this one). Many use too few images to brighten up their pages or end up with boring sites, rather than use them to add interesting visual effects. However, adding images does not have to be tricky, and one of the quickest, most effective ways to do that is with backgrounds.

Selecting Images

A few years ago, Geocities and Angelfire were packed with sites that used incredibly bright, garish backgrounds on their pages. Instantly, tiled backgrounds went out of fashion, and are often derided. However, there is no reason you can't use a tasteful tiled background on your pages, as long as you remember to keep it reasonably subtle and make sure your page content is still readable. For those of you who doubt that tiles backgrounds can ever be tasteful, take a peek at the [url=http://www.squidfingers.com/patterns/]free backgrounds available from Squidfingers.com[/url], all of which look great and could easily improve a web page.

Of course, there's no reason you have to use a tiled background on a site. Sometimes a single, simple image can be extremely effective. Sometimes a collection of background images works best, as a quick visit to [url=http://www.csszengarden.com]CSSZenGarden.com[/url] will demonstrate. If using a background image, make sure it doesn't clash with your design, and make sure your site works without it, as not everyone will be able to see it.

There's also no reason that the background you add needs to be a page background. Backgrounds can work well as borders to elements, or backgrounds to specific parts of pages, rather than the entire document.

Adding Backgrounds

Defining a background in CSS is fairly simple, and the below is an example of the quickest way to do it.

body { background-image: url("background.gif"); }

That code will place "background.gif" at the top left of the body of the page being styles. The image will also tile itself so it covers the entire page. And when you scroll down the page, the background will move as you do so.

Some people may not be seeing images though - they may have them turned off, for example - so it is important to set a background colour as well. This is done using the "background-color" property, as below. Please note that if you have transparent areas in your image, the colour you choose as a background will show through those areas too. Also, when setting a background to the <body> element, it is important to not assume that everyone has the same default background colour as you, as they may not.

body { background-color: #ffffff; background-image: url("background.gif"); }

Stop that Background!

The first thing many designers want to do is stop a background from tiling and moving. They want one image as the background, and they want it to stay still while you scroll. These two settings are controlled by "background-repeat" and "background-attachment".

"background-repeat" tells the browser which direction or directions the image should be tiled in, if at all. The values allowed for background-repeat are "no-repeat", "repeat-x", "repeat-y" and "repeat". "repeat" is the default behaviour for most browsers, so usually not worth specifying. "repeat-x" tells the browser to repat the image horizontally, and "repeat-y" vertically. "no-repeat" tells the browser to only use the image once - not to tile it in any direction. To tell the browser not to tile the image we used above, we might use the following code:

body { background-color: #ffffff; background-image: url("background.gif"); background-repeat: no-repeat; }

More control

"background-attachment" tells the browser whether or not the image should move when the user scrolls with a page. The default is for it to move with the window, so this property is generally only used when a designer wants an image to stay still while a user scrolls up and down a page. The "background-attachment" property can have one of two values, "scroll" (the default) or "fixed". Continuing with the same example we've used above, making a single image, that isn't going to tile, stay still while the user scrolls, could use the following code:

body { background-color: #ffffff; background-image: url("background.gif"); background-repeat: no-repeat; background-attachment: fixed; }

Positioning

The "background-position" property in CSS applies to any element with a background image applied. It can be used to move a background image around a page, and with a little creative use of server-side scripting could even be used to make a background image appear in a different place for each used who visits your site. However, for now, let's stick to the basics.

Background positions can be set in any one of three ways: using keywords, using percentages, or using pixels.

Keywords are the most commonly used of these, probably because they are quite simple to use. They work as a pair, though you do not need to name both of them. You name the vertical part first, and the horizontal second. The vertical part can have a value of "top", "center" or "bottom", and the horizontal can be "left", "center", or "right". The defaults for these are "top" and "left". If, however, you wanted the image we've been working with so far to be at the bottom right, you might use code like this:

body { background-color: #ffffff; background-image: url("background.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: bottom right; }

Pixels are also easy to use. If you want to place a background image 100 pixels from the left hand side of the page, and 50 pixels from the top, you could use the following, though it's important to remember that when using pixels or percentages to position a background, it is the horizontal part you define first:

background-position: 100px 50px;

Percentages can be more tricky to work with. When you define a percentage, you do not always, as with pixels, define where the top left corner of the background image will be placed. For example, if you were to place a background image at "10% 10%", you might expect the top left corner of the image to be 10% of the way down the page, and 10% of the way across the page from the left hand side. However, what will happen in practice is that the point 10% of the way down the image, and 10% from the left hand side of the image, will be 10% of the way down the page, and 10% of the way across the page from the left hand side. (It is worth noting that the same principles apply to keywords - center being equivalent to 50% and right and bottom equivalent to 100% for positioning purposes - keywords are usually easier to get your head around though.)

While this can cause the occasional glitch, percentages are, however, quite easy to work with when you get used to them. For example, if you wanted to place an image dead center to the page, the following would place the center point of an image at the center point of a page:

body { background-color: #ffffff; background-image: url("background.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: 50% 50%; }

Shorthand Laziness

All things considered, the final bit of code above is quite a handful. That's a lot to type in order to add a background to an image. If you want to save yourself some time, and some bytes, you can use shorthand declerations to set backgrounds. If you remember the default values for properties too, you'll save yourself even more time and bandwidth.

The above code, in shorthand, would be this:

body { background: #ffffff url("background.gif") no-repeat fixed bottom right; }

You don't need to set every value in the above to use it though. For example, if you wanted to set a background image on a page, using a background colour of white, but you wanted the image to tile and to move when you scrolled, you could just use this:

body { background: #ffffff url("background.gif"); }

As you can see, this makes background declerations far more manageable (and is actually slightly more widely supported than the longer alternative).

Getting Creative

Bearing in mind we can attach a background to a particular side of an element, there is no reason we can't use backgrounds as borders to elements. Apply a border to the bottom of links, with a little padding, and you'll have a very unusual underlining effect. Backgrounds can be applied to virtually any element - make the most of them!

Microsoft Difficuly

It may have occurred to you already that using semi-transparent images (for example PNGs), you could create some pretty impressive effects. Sadly, Microsoft do not yet support PNGs properly, meaning we can't use semi-transparent backgrounds very easily. However, all is not lost. If you want semi-transparent backgrounds, you can use IE's "AlphaImageLoader", which will make an image translucent by percentage to fake the effect. As the "AlphaImageLoader" is proprietary Microsoft technology, it will not affect how your site looks in other browsers.


comments powered by Disqus