Using Graphics in CSS Styles

by Eileen Mullin — Apr 5, 2007

Want to add a repeating image to your site's header, use custom bullets in a list, or position an image that remains in place on your site even when users scroll down? You can accomplish all of these effects using the CSS background property.

You may already be familiar with setting background images in table cells. The CSS equivalent is more flexible, with more options for positioning and displaying that background image. It's also good to learn how to use the CSS syntax for background images in case you find yourself working on a tableless, CSS-only site, which I find clients will sometimes request.

Background image basics

Let's start by specifying the path to the background image in your CSS code:

h1 {background-image: url(underline.jpg);}

You can use either the local path or a complete Web address to the image. Next, you can control whether this image should repeat horizontally or vertically. In geometry terms, this can be stated as repeating across the x-axis or y-axis, respectively. For this reason, these attributes are known as "repeat-x" and "repeat-y", as shown below:

h2 {  
	background-image: url(image.jpg); 
	background-repeat: repeat-x; }
h3 {  
	background-image: url(image.jpg);
	background-repeat: repeat-y; }

Leaving off the x- or y-axis parameter allows the image to repeat in both directions. You can also specify if the image should not repeat:

body {  
	background-image: url(image.jpg); 
	background-repeat: repeat; }

#main {  
	background-image: url(image.jpg); 
	background-repeat: no-repeat; }

Fixed background images

It's possible to have your background image remain displaying in a fixed position on your screen, even as users scroll up and down the page. The effect is similar to the way TV networks may place a logo in the corner of the screen during a show.

#main { 
	background-image: url(image.jpg); 
	background-attachment: fixed; 
}

Similarly, you can specify the exact position where an image should display within an HTML element using the background-position property. You specify the position location using exact pixel values, percentages, or keywords that describe the location. I've included an example of each below:

#pixelplaced { 
	background-image: url(image.jpg); 
	background-position: 25px 10px; 
}

#header { 
	background-image: url(image.jpg); 
	background-position: 20% 10%;  
}

#footer { 
	background-image: url(image.jpg); 
	background-position: bottom right; 
}

In the above description for the #pixelplaced style, the image's location will be placed 25 pixels from the left of the screen and 10 pixels from the top of the screen. In the example using percentages above — the # header style — the image's location will be 20% from the left of the screen and 10% from the top of the screen, where A and B are integers. When using positioning keywords, you can use the following terms: top, right, bottom, left, and center.

Bullet images in CSS

One useful purpose for the background property is to replace ordinary bullets in lists with your own graphics. To do so, you start by redefining the <ul> tag, which controls unordered lists (those using bullets, not numbers):

ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}

This removes the bullet markers as well as any indentations that a browser might apply.

Next, let's specify the bullet graphics for each list item -- the <li> tag:

li { 
background: url(image.gif);
background-position: left center;
background-repeat: no-repeat 
}

You can shorten this collection of background properties - as well as any of those in earlier code examples above - with a single background declaration:

li {background: url(image.gif) left center no-repeat;

In this example the browser will place the image at the left edge of the list item. To position the bullet more accurately, you can use pixel values instead of these kinds of positioning keywords.

However, at this point, the text for each <li> tag will appear directly atop the bullet. To pad this out a little, just insert a padding value to the left side of the <li> style. If the graphic is 15 pixels wide, for example, you might put 20 pixels of padding on the left-hand side. Similarly, you could add to the top or bottom margins if the list items appear stacked too tightly together. To sum up, a list item that uses a custom graphic with extra padding and extra spacing in the top margin might look like the following example:

li {
background: url(image.gif) left center no-repeat;
padding-left: 20px;
margin-top: 5px;
}
Del.icio.us Digg Technorati Blinklist Furl reddit Design Float