CSS Backgrounds

Backgrounds are solid white by default, however they can be modified by using CSS to set a specific background color and/or image, and by choosing how that a background image is displayed.

Backgrounds can be set for an entire webpage by setting the background properties in the body { } selector. They can also be set for specific elements, such as <div>, <p>, <table> and <ul>, to name a few.

CSS Background Color

The background color is set by the background-color property along with a color value.

body { background-color: #FFFF99; }

CSS Background Images

A background image can be set by using a number of individual properties, or a single background property that accepts multiple values.

The background-image property is used to set a background image. The path to the image needs to be specified.

body {
  background-image: url('images/animals/seagull.gif');
}

CSS Background Repeat

By default, a background image will repeat itself on the entire webpage, both horizontally and vertically. Setting the background-repeat property can control or prevent this repetition. The background-repeat property accepts any one of four values at a time.

background-repeat: repeat; (Default Setting, Repeats Image All Over the Page)
background-repeat: repeat-x; (Background Image Will Only Repeat Horizontally)
background-repeat: repeat-y; (Background Image Will Only Repeat Vertically)
background-repeat: no-repeat; (Background Image Will Be Shown Only Once)

CSS Background Position

It may become useful to move the background image to a specific location on the webpage, or in the element that it is set in. The default location for the background image is the top left corner, but other locations can be set using the background-position property. Two values must be specified, one to set the horizontal position and the other to set the vertical position.

background-position: 25px 25px; (Length Can Be Specified in px, cm, pt, etc.)
background-position: 50% 50%; (Percentages Can Be Used)
background-position: left top; (Default Position, Equivalent to 0% 0%)
background-position: left center; (Equivalent to 0% 50%)
background-position: left bottom; (Equivalent to 0% 100%)
background-position: right top; (Equivalent to 100% 0%)
background-position: right center; (Equivalent to 100% 50%)
background-position: right bottom; (Equivalent to 100% 100%)
background-position: center top; (Equivalent to 50% 0%)
background-position: center center; (Equivalent to 50% 50%)
background-position: center bottom; (Equivalent to 50% 100%)

CSS Background Attachment

Now that we know how to set a background image in place, it is time to decide whether or not the image should scroll with the rest of the page, or stay fixed in place, allowing the page's contents to scroll over it.

background-attachment: scroll; (Default Value, Scrolls With Page)
background-attachment: fixed; (Background Image Does Not Scroll With Page)

CSS Background

And now, last but not least, the shortcut that you didn't know you were waiting for. The background property allows all of the other background properties to be set in a single declaration.

background: #FFF url('../images/animals/seagull.gif') no-repeat scroll top right;

The background property shown in the example above was applied to this paragraph element, along with a grey border.

It's pretty neat what CSS can do, isn't it?


What do you call a boomerang that doesn't come back?
A stick!