CSS Backgrounds: 12 Solutions To Common Questions

CSS backgrounds are an important part of web design. The property is where you add the colors and images that sit behind your content, which controls much of the aesthetics of your site. Remove your CSS backgrounds and your site will probably be text on a white background.

While relatively easy to understand, CSS backgrounds often lead to some questions and confusion when it comes to pulling off specific techniques. Let’s see if we can clear up some of that confusion and then answer a few of those technique specific questions.

What Are CSS Backgrounds?

CSS backgrounds are pretty much what the name implies. They’re something you add to the background of an element. More specifically they are colors and images that sit behind whatever content is added inside the element. When developing a css driven site these background colors and images are usually responsible for most of the design elements in your template.

The background of the element is defined according to the css box model. Margins are not included as part of the background, but borders, paddings, and the width of the content are included.

There are 5 background properties you can apply to a css selector, 4 of which apply to background images:

• background-color — sets the background color of an element. The color can be specified as a hex value, an rgb value, or by one of the limited color names. The background-color can also be set as transparent or it can be set to inherit the background-color of its parent element.
• background-image — sets an image as the background of an element and it’s value will look like url(“path-to-an-image”). The background-image property can also have values of none and inherit
• background-repeat — sets how a background-image is repeated. Values are repeat, no-repeat, repeat-x, repeat-y, and inherit
• background-attachment — set how the background image will move with the page. It can scroll (moves with the element as the page scrolls), remain fixed (stays in position even when the page is scrolled), or inherit from the parent element
• background-position — sets the starting position of the background image within the element. Images can be set to start vertically at the top, center, or bottom and horizontally at the left, center, or right. The background position can also be set to start a fixed amount or a % from the top left corner of the element.

CSS Background Shortcut

While you can specify each background property (PDF) individually, in practice you’ll want to use the shortcut. When using the shortcut you should specify properties in the following order: color, image, repeat, attachment, position.

{code type=htm}
div {background: #0088ff, url(“path-to-an-image”), repeat-x, scroll, top left}
{/code}

You don’t need to specify all the properties when using the shortcut, but you do want to use the right order. Any property you don’t specify will be assigned a default value as follows:

• background-color: transparent
• background-image: none
• background-repeat: repeat
• background-attachment: scroll
• background-position: 0% 0%

You can for example use the shortcut as in the following

{code type=htm}
background: #0077ff
background: url(“path-to-image”) no-repeat
background: url(“path-to-image”) top left
{/code}

In each of the above lines of code the default values will be used for the properties not specifically mentioned.

CSS Background Images are not HTML Images

One important concept to understand is that images you set with a css background do not behave the same way as an image you set using the html <img> tag.

An html img tag creates a new box. A css background image is placed in an existing box. You can’t add padding or margins or a border to a css background image. You don’t set a width and height on a css background image.

Because an html image is a new box it has width and height, paddings and margins, and a border. It can also have a css background image applied to it. I’m not sure how often this is done in practice, but you can add a background image behind an html image if you’d like.

photo credit: comedy_nose

Solutions to Common CSS Background Questions

While the background property is fairly easy to understand and use there still arise a variety of questions around it.

1. Why won’t my background image show?

This is usually because the element has no width or height. Remember a background image doesn’t create a box. It fills the existing box. If that box has no width or height there’s nothing to fill. The solution is to give your element some dimensions. You can explicitly set a height and width on the element (not the background image) or fill the element with some content creating a height and width.

In some cases you do have content inside the element, but all that content has been floated taking it out of the normal document flow. When that happens the containing element (where you’re wanting to add the background) technically has no dimensions. You can add the overflow property to the element to force it to have dimensions as though the floated elements inside were still part of the normal document flow.

2. Can I use multiple background images?

Yes and no. The CSS3 spec allows for multiple background images, but since all browsers haven’t quite adopted the CSS3 spec you’ll want to hold off on multiple background images for awhile.

However remember that all html elements can have a background applied. Say you have a div which contains an h2 element and a paragraph. You could apply background images to each and by controlling other css properties you can often achieve the same effect you want. You could also add more html divs and spans inside or outside your element to have more places to add a background. This does get somewhat clunky, but it can work.

3. How do I swap background images when hovering over an element?

You can do this in 2 ways. Add a new css rule for your element:hover and either change the background-image property to point to a new image or have your image be a css sprite and change it’s background-position to show a different part of your sprite image.

It’s important to note that older versions of IE only accept :hover on a link element so you’ll need a little javascript to make this magic happen for IE. My preference is the suckerfish solution, which is the same solution I use for drop down menus.

4. How can I make my background images transparent?

Unfortunately you can’t. You can set transparency on the element, but not specifically on the background image. If you do set transparency on the element know that everything inside the element will get that same transparency.

Depending on your situation you may find it best to add the transparency when creating the image in Photoshop. That way you can control the look of the image, though you still won’t be able to see through the image.

5. Can I set a background image on my table, table row, or table cell?

Yes. Each is an html element and so takes the background property. However tables have a complex way in which backgrounds are determined through the use of layers and transparency, which can be seen in the following image.

The background for an element in one layer is only visible if the layers above it have a transparent background. That can be a little confusing to get working right, which is why many people fall back on html attributes to set backgrounds on tables.

Fortunately transparent is the default so the layers above should already be transparent. Once you start adding backgrounds to one part of the table, though it can become more complex to work out.

6. Can I add background images to borders?

Not yet. This is another of those coming in CSS3 things. You can use it now if you don’t mind it not working across all browsers.

7. Can I add background images to lists?

Yes. Lists are html elements and so can take a background image. Here’s a simple way to set the background-image property to use an image of your choice as the bullet in a list.

8. How do I add padding to a background image?

As I mentioned above a background image doesn’t create a new css box so you can’t give it padding. What you want to do is use the background-position property to offset where the image appears.

9. How do I align a background image to the right?

Similar to the above question, this is a background-position thing. Use a value of right in your background-position and the image will be aligned to the right edge of the element.

10. Why won’t my background image show when printing?

You don’t have control over this for good reason. It takes a lot of ink to print an image and many people would prefer not to print them. Whether or not to print background images is set in the browser by the individual. I’d recommend not forcing the issue, but you can try this workaround to sort of force printing on css background images.

11. How do I stretch a background image to fit an element?

Once CSS3 is fully here you’ll be able to do this with the background-size property. Until then you can try to fake it.

Another possible solution that may fit your needs is to create an image much wider than you need and set the background-position to 50% 50%. This will center your background image inside the element and as the element grows wider more of your image gets revealed, while the entire image remains centered.

Not exactly stretching, but useful for ensuring your image fills the space even as the space grows larger.

12. Can I wrap a link around my background image

No. Again background images do not create boxes. The solution is to add the link around all the content inside the html element or wrap the link around the element itself. Which you would use depends on the specific html element and the content inside that element.

Summary

Hopefully the above clears up some confusion you may have when it comes to working with the css background property or offers a solution to a problem you’ve had. The key point to remember is that css backgrounds do not create new boxes. They only fill existing html boxes. Understanding that point will help you see what you can and can’t do with background images.

CSS backgrounds are a vital part of giving your design its look and feel. Most of the images you’ll create for your site’s template will want to be set using the background property so it’s a good property to become familiar with and learn how to master.

If you have any questions or problems using the css background property please ask, and I’ll do my best to find a solution for you.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.