Background images

We already looked at the ability to define a different background color than what is used by default, but with CSS, we can actually use images for the background as well. Using the background-image property, along with several helper properties, we can completely control this useful aspect of CSS.

But, why would you use a background image on an element instead of just inserting an image through the HTML image tag? That's an easy question to answer, because with CSS background images, you are allowed to put content on top of the image or even use an image as the background for the entire browser window, while only using a fixed portion of it for content.

In the first example, I'm going to show you just how easy it is to use a background image with a regular div element:

<style type="text/css">
.box {
	background-image: url('http://css3-tutorial.net/images/blu_stripes.png');
	width: 200px;
	height: 100px;
	text-align: center;
	font-weight: bold;
	font-size: 2em;
}
</style>

<div class="box">
	Hello, world!
</div>

The essential part here is of course the use of the background-image property. Notice how the value prefixed with the url keyword and then enclosed inside a set of parentheses as well as a set of quotes. The quotes can, in principal, be omitted, but they are required as soon as you need to have any space characters in the path, so it's usually easier to just make a habit out of using them.

The actual URL can be any type of image that the most common webbrowsers can use, so JPEG, PNG and GIF are obvious and very commonly used.

Defining a fallback background color

In the above example, we use an image hosted on this server, but for it to work everywhere, I have specified the full path. You should however never rely on images hosted on servers outside of your control, for two good reasons: They won't appreciate the fact that you're using their bandwidth, and as a result of that, they might delete or rename the image file, in which case your site won't look as intended.

However, even if you host the image on your own server, as you should be doing, the browser can't display the background until the image has been downloaded. This might be slow, either because your server is under a lot of pressure or because the background image is very big or a combination of the two, and in the meantime, no background will be displayed for your element.

Actually, this is only true if no background has been specified for a parent element, since this value will be inherited, but for instance, if you have defined a dark background image for your body element, the default background color is likely white. This will make the transition from the default background (white in most browsers) to your background image (in this case a dark pattern) seem a bit harsh if the browser is having trouble with fetching the image fast enough.

For this reason, it can be a good idea to specify a background color as well as a background image. By specifying the background color before the image, the browser immediately uses the defined color and then replaces it with the image as soon as the browser has fetched it. Here's an example:

<style type="text/css">
.box {
	background-color: #ebf1f3;
	background-image: url('http://css3-tutorial.net/images/blu_stripes.png');
	width: 200px;
	height: 150px;
	border: 1px solid black;
	text-align: center;
	font-weight: bold;
	font-size: 2em;
}
</style>

<div class="box">
	Hello, world!
</div>

In this case, I have used a background color found in the actual background used - this will make the transition as smooth as possible. You won't likely even see it, but if the image was bigger, the server more busy or if the user is on a slow connection, this will be a great improvement. This will also help you in situations where the image can't be loaded for one reason or another - it simply gives you more control.

Summary

In this article we learned how to use an image as a background for an element. Remember that even though we just used a simple div element in these examples, you can use the background-image for pretty much any HTML element, including the body element!

We also learned that it's a good idea to define both a background color and a background image, in that order. The background color will be used as a fallback value, in case the image doesn't exist or if the browser is having problems fetching the image fast enough.

If you download the image used in the first example, you will realize that it's only 100 pixels wide and 100 pixels high, but the box containing the background is twice as wide as that, so why does the background still fill out the entire space? The secret lies in the ability for CSS to repeat a background - in fact, it will do so by default. This entire concept will be discussed in depth in the next article.