The CSS Property of background can be used with any element to set the background color or a background image.

Take Note: The attribute background applies to the content area, the padding and the border areas. It will not apply to the margin area for the element.

The attribute background can be used as a shortcut to display multiple attributes for setting the background.

Below is a list of the various background attributes.


background-color

value: <color> | transparent | inherit
initial value: transparent
inherited: no
percentages: N/A
applicable to: all elements

The background-color attribute allows you to set the background color for any element. The default value is transparent. You don't need to state that it is transparent unless you want to override some other styling that is affecting the element. The color value given must be a web color, hexadecimal or RGB color.

Example:

.highlightbox {background-color: #f4ff87}
#bigbox {background-color: rgba(204,134,34,.5)}
h2.highlight {background-color: yellow}

In the second example, the rgba() value is set. This adds a 50% opacity to the RGB color stated.


background-image

value: <uri>| none | inherit
initial value: none
inherited: no
percentages: N/A
applicable to: all elements

The background-image attribute allows you to specify an image file to be used as the background for any element. The possible values are none, <uri> means that you need to specity url or uri for the image location. The value of none is the default value, but might need to be used to overwrite other styling that is applied to the element from another source. You may use offsite images by calling out the full url to the image. The file must be an image file such as .jpg, .png or .gif., if the image file is in the sites directroy structure you only need to state the path to the image.

Example:

.fadebackpurple {background-image: url(images/purple-gradient.png)}
.myphoto {background-image: url(http://www.specificsitename.com/images/myphoto.jpg}

There are a number of things to note about an image used for a background.

  • if smaller than the area of the element, the image will repeat itself in both the x and y direction, unless told otherwise using repeat-x, repeat-y or no-repeat with the background-repeat attribute.
  • the image will come in at full size, unless told otherwise. If the image is larger than the element, it will go beyond the limits of the element, unless told otherwise with an overflow attribute.
  • the position of the image within the element will start at the upper left corner, unless told otherwise with a background-position attribute.
  • if the image is larger than the element the image will not scroll within the element unless told otherwise with the background-attachment attribute.
  • a background image for an element will lie beneath any text
  • when stating the url for the image, you must give the path from where the style sheet is located to where the image file is located, using ../ to go up one directory if needed.

background-repeat

value: repeat | repeat-x | repeat-y | no-repeat | inherit
initial value: repeat
inherited: no
percentages: N/A
applicable to: all elements

A background image will be tiled across the element in both the x and y direction by default. The background-repeat attribute will set if the background image will repeat and in what direction. There must be an image set for the element with the background-image attribute for this to be applied. The possible values are repeat, repeat-x, repeat-y and no-repeat. The default value is repeat and you do not need to state this unless you are attempting to override another style that is affecting the element. repeat-x tiles the image horizontally, repeat-y tiles the image vertically and n-repeat will rusult in only one instance of the image.

Example:

body {background-image: url(images/grey-gradient-top.png); background-repeat: repeat-x;}

In this example, the image will only be tiled in the X direction, or horizontally, across the entire element.


background-attachment

value: scroll | fixed | inherit
initial value: scroll
inherited: no
percentages: N/A
applicable to: all elements

In order to use the background-attachement attribute, you must have a background-image specified. The background-attachment attribute specifies that the background image is fixed in relation to the viewport or if it will scroll along with the containing block. The scrolling will be set with an overflow attribute. A fixed setting will cause the image to be stationary as the containing block scrolls. A setting of scroll, the default setting, will have the background image scroll along with the other information in the block.

Example:

.myHomePhoto {background-image: url(images/myhomeimage.jpg; background-repeat: no-repeat; background-attachment: fixed;}


background-position

value:  [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
initial value: 0% 0%
inherited: no
percentages: refer to the size of the box
applicable to: all elements

In order to use the background-position attribute, there must be a background image specified. The background-position attribute will place the image in the box per the pixels or percentages specified. The upper lefthand corner of the containing element box will be the default location for the upper lefthand corner of the image. Negative <percentage> values and negative <length> values are allowed. The first value given is in the X or horizontal direction. The second value given is in the Y or vertical direction. You may also specify top, right, bottom, left or center for either the first or second value.

top = 0% in vertical direction, right = 100% for the horizontal direction, bottom = 100% for the vertical position, left = 0% for the horizontal postion, center = 50% for either the horzontal or vertical postion.

Example:

.withbackground {background-image: url(../../images/fuzzybackground.jpg); background-position: 20px 20px;}
.withbackground {background-image: url(../../images/fuzzybackground.jpg); background-position: top center;}
.withbackground {background-image: url(../../images/fuzzybackground.jpg); background-position: -10% -50%;}

 


background

value: [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit
initial value: refer to the individual properties shown above
inherited: no
percentages: for use with the background-position portion
applicable to: all elements

the background attribute is a shorthand property that allows you to call out the values for all of attributes for background such as background-color, background-image, background-attachment, background-repeat and background-position. You can state them in any order. Put a space between each property.

Example:

header {background: #aab467 url(../../../image/green-gradient.png) repeat-x 0% 50%;}

The above example will fill the <header> area with the color #aab467, but with the image green-gradient.png layed on top. The image will only tile in the horizontal direction. The image will start on the left edge, but at 50% down.

TAKE NOTE: If you are using inline styles in an HTML format for creating emails, you need to use each individual property. The shorthand property of background will not be recognized.