Breadcrumbs

CSS Background Properties

CSS has many background properties, more one background property with branch properties. The CSS background property allows you to control the background of the class, id, or tag that you are assigning the property to. It allows you to set things such as a background color, image, and other attributes of that background (most relating to background images).

There are 6 background properties. These are background, background-attachment, background-color, background-image, background-position, and background-repeat. This all provide easy background control.

background-color

background-color sets the color of the background for the specified class or id. Here is an example of it being used to make the body of an HTML page a nice grey:

Code: CSS

body {
    background-color: #DDD;
}

This is a good replacement for the bgcolor attribute of HTML tags and looks better in my opinion. Instead of placing a hex value for a color you can also place other values for the background-color property. You can place the name of a color such as 'black' which is equivalent to #000. You can also make it transparency although I don't recommend doing transparent stuff often as it can get overdone quickly and look sloppy.

background-image

You use background-image to set a background image for a class/id. For the value of background-image you probably want to use url(urlofimage); to make it a url of an image on the web. Here is an example of the background-image CSS property for a body tag:

Code: CSS

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

Just remember not to forget the url() part as without it the background will not show up.

background-repeat

background-repeat sets how or if the background image of a class/id will repeat. The values for this property are no-repeat, repeat, repeat-x, and repeat-y. no-repeat makes it so that the background image only shows up once, you will probably use this value the most. repeat is the default value and just says that the background image repeats. repeat-x makes the background image repeat from where it originally starts (set by background-position) horizontal and repeat-y makes the background image repeat from where it originally starts vertical.

background-attachment

There are only two values for background-attachment, scroll or fixed. Scroll makes the background image scroll along with the page so it changes as you scroll. Fixed makes it so that the background image doesn't scroll at all so you see the same portion or the image no matter what.

Code: CSS

body {
    background-attachment: fixed;
}

The above code makes the background image fixed to the page.

background-position

The background-position sets the starting point of the background image, so you can have it start in the center, right, left, etc. There are many values for this:

  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right
  • x-% y-%
  • x-pos y-pos

If you are going to have the image repeat over the entire class/id then top left is the best value for this.

background

This is a quick property putting all the other background properties into one for quick coding. It allows you to place all of the property values into one property. For example if we have all these properties:

Code: CSS

background-color: #FFF;
background-image: url(image.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top left;

You can make this all one property and it would look like so:

Code: CSS

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

This is much shorter and works great. I do have to point out that sometimes this doesn't work properly in Internet Explorer, often when things aren't in the right order, not that only IE makes note of this.