CSS Styling Background Color and Images

Tuesday, March 13, 2012

tags CSS

CSS allows you to easily set the background color or image of many HTML elements. You have control and the flexibility over how the background color and/or image is presented. You may choose to have it repeat horizontally, vertically, or in neither direction. You may also choose to have the background remain in a fixed position, or have it scroll as it normally would. CSS properties used for background effects are as follows:

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

Background Color

Many elements allow for the styling of their background-color property. You can assign the color using the HEX, rgb, or color name value.

p {background-color:yellow;}

This paragraph has a background color of yellow.

Background Image

The background-image property specifies an image to use as the background of an element. Many elements allow for this style to be applied, but the body element is the most common element that has this property used. Use this property on the body element if you want the background of your web page to display an image. By default, the image is repeated so it covers the entire element. Make sure that you use an image that is compatible with your text color so that your users can easily read the text.

body {background-image:url('imageFile.gif');}

Repeating Images

In some cases, you may have an image that you want to repeat on the page, repeat horizontally, repeat vertically, or not repeat at all. You can use the background-repeat property and assign one of the following values: repeat, no-repeat, repeat-x, or repeat-y. Here is an example if you have a gradient image with a width of 1px, and you want to repeat it across your element.

body {background-image:url('imageFile.gif');background-repeat:repeat-x;}

This image is repeated horizontally (x).

Image Position

If you want to display an image and have a fixed position for it, you can use the background-position property. You need to specify the horizontal and vertical values when using this property. Values are top, bottom, left, right, center, pixels, and percentages. Simply add a space between values.

body {background-image:url('imageFile.gif');background-repeat:no-repeat;background-position:left top;}

Image Attachment

If you want to display an image and have it in a fixed position when you scroll down the page, you need to set the background-attachment property with a value of fixed.

body {background-image:url('imageFile.gif');background-repeat:no-repeat;background-position:left top;background-attachment:fixed;}

Background Property (Shorthand)

If you need to apply more than one background related property to your element, rather than specifying each one individually, you can simply use the background property and assign the following values, each separated by a space. This makes the CSS style shorter, and easier to read.

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

body {background: #F0F0F0 url('imageFile.gif') no-repeat fixed left top;}

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

HTML CSS and JavaScript Editor CSS: The Missing Manual HTML CSS: The Complete Reference