First time visitor? The tutorials start here.

CSS background property

The different “background” properties you can define are:

  • background-color
  • background-image
  • background-position
  • background-attachment
  • background-repeat

background-color

The possible values for background-color are a hex code (short for hexadecimal color code), a name value, or transparent.

The default background-color of a page is white. The default background-color of everything else is transparent.

I prefer to stay away from name values (literally white, blue, green, etc) because hex codes can be tweaked, plus I personally don’t need a chart for hex codes, due to the way they work.

To see how hex color codes work, see the glossary entry on hex codes.

background-image

The format for defining background-image looks like this:

background-image: url(image.gif);

Do not ever put a space between “url” and the opening parenthesis. I have seen a lot of people make the mistake of adding a space there, and then they scratch their heads for hours trying to figure out why it didn’t work. I am stressing this here to save you the aggravation that can come from such a common mistake.

You would replace “image.gif” with the actual URL to your image. That is, unless “image.gif” just happens to be the actual URL to your image, in which case you would use that. You can use an absolute, relative, or root-relative URL, depending on where the image is located within the world wide web.

Note: When you have a background image covering the entire background of an element, you should also use a background color along with that image.

Why, you ask? Have you ever used dialup to connect to the internet?

If you use both a background color and background image together, the background color will show while the image is still being downloaded. If you use a background color that closely matches that image, it will make the text readable while the image is still loading, as well as make for a smooth transition when that image finally appears to those who have to wait for it.

Also, if you are linking to an image that isn’t stored on your domain, there’s a chance that the server (computer) that is storing your image could go down, and people won’t see that image at all. So, if your site has white text with a black image as its background, but no background-color defined for it (the default is white) and the image doesn’t load, people won’t see the text at all.

background-position

background-position refers to the background image. Although it is sometimes safe to define vertical (top to bottom) positioning before horizontal (left to right), it is always safe to define horizontal first. So, to make things easier on yourself, you should always define horizontal positioning before vertical positioning.

That said, here are some examples of background-position:

background-position: left top;

left top will put it in the top left corner of the element you are styling.

background-position: center top;

center top will center it at the top of the element.

background-position: center;

This could also be written as center center, but either way will center the background image both horizontally and vertically within the element.

background-position: right bottom;

Hopefull you will get that last one without an explanation.

background-position: 25% 50%;

This is why you should always define horizontal positioning before vertical, because when numbers are used this way, positioning from left will come before positioning from the top by default. Here, the background image will be 1/4 from the left side of the element, and centered vertically (top to bottom).

background-position: 10px 50px;
background-position: 3em 10em;
background-position: 5em 20px;
background-position: 1em;

In these last 4 examples, the first number measures from the left side of the element, and the 2nd number measures from the top of the element. In the very last example where there is only one measurement, it will be 1em from both the left and from the top.

background-attachment

This defines whether the background image sticks in one place when the page is scrolled, or scrolls along with it. It works pretty consistently when applied to the whole page (body), but doesn’t always stay fixed in some browsers when applied to a particular section of the page.

That said, the possible values for the background-attachment property are:

  • fixed
  • scroll

The default behavior is to scroll with the page, so in most cases (there are exceptions to most rules), there’s really no need to define background-attachment if you want it to scroll.

Example:

background-attachment: fixed;

That one was pretty simple. Now let’s move on to the last one…

background-repeat

The possible values for this one are:

  • repeat
  • no-repeat
  • repeat-x
  • repeat-y

The default behavior for this is to repeat itself (tile) both vertically and horizontally to fill the element, so there is no need to use the first one listed there (repeat).

If you use no-repeat, the image won’t tile at all and will only appear once within the element.

If you use repeat-x, it will repeat horizontally but not vertically.

If you use repeat-y, it will repeat vertically but not horizontally.

I have seen people use both repeat-x and repeat-y together to make it tile both ways, but this is just plain wrong. Don’t do it. Use repeat instead, or don’t define it at all since it’s the default behavior anyway.

Example:

background-repeat: no-repeat;

Now that I’ve covered all the background properties, here is how to shorten it:

Shorthand

Rather than use several lines of CSS to define your background, you could use shorthand instead.

Shorthand needs to be listed in the order that I presented it here:

  • background-color
  • background-image
  • background-position
  • background-attachment
  • background-repeat

Now for an example:

background: #eee url(image.gif) left top fixed no-repeat;

If this is applied to the body tag (how to?), it will make the background color of the page light gray with a background image in the top left corner of the page, sticking to the same place even when the page is scrolling.

If you leave out any value here, it will use the default. For example:

background: url(image.gif);

That will result in a transparent background-color with image.gif as the background-image, tiling both horizontally and vertically with the first tile in the upper left corner, and this image will move along with the page when it’s scrolled.

Return to the list of CSS properties

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.