CSS has a dedicated module which goes into great detail to describe support for background. This module http://www.w3.org/TR/css3-background/ is currently in draft and extends the functionality laid out in CSS2. In addition to what CSS2 offered for background, this module discusses support for boxes with multiple backgrounds.

 

In an earlier article https://www.htmlgoodies.com/css/working-with-css-box-model-in-your-web-apps-part-1/ , we learned that all elements are rendered as boxes. Each box has a background layer which can be transparent, color-filled or have one or more images.

Let us explore the background related CSS properties.

 

background-color

This property specifies the fill color for a box background.  If there are background images, the specified color will be drawn behind the background images.

The declaration for this property is as under:

h1 { background-color: # 00ff00 } /* Sets background to green. */

When not specified, this property has an initial value of “transparent”.

 

background-image

This property specifies the background image of an element. If multiple images are specified, the first one specified is on the top and every subsequent image is put behind the previous one.

The declaration of this property is as under:

body { background-image: url(“mybackground.svg“) } /*single image specified*/

 

body { background-image: url(“mybackground1.svg”), url(“mybackground2.svg”) } /*multiple image specified*/

 

It is recommended that when a background image is specified, a contrasting background-color also be specified so that in case the image fails to load, the user still has a good experience.

 

background-repeat

This property is used to specify how background images are tiled after they have been sized and positioned.

It can take the following values:

• repeat – The image is repeated in the direction to cover the background painting area.
• space – The image is repeated as often as will fit within the background positioning area without being clipped.               
• round – The image is repeated as often will fit within the background positioning area.
• no-repeat – The image is placed once and is not repeated
• repeat-x – which computes to “repeat no-repeat”.
• repeat-y – which computes to “no-repeat repeat”.
• repeat – which computes to “repeat repeat”.
• space – which computes to “space space”
• round – which computes to “round round”
• no-repeat – which computes to “no-repeat no-repeat”

The declaration of this property is as under:

body {

  background-image: url(mybackground.png);

  background-repeat: repeat

}

 

 

background-attachment

 

This property is used to specify where background images should be affixed.

The valid values include include:

• fixed: fixed w.r.t the viewport
• scroll: scroll along the element’s contents
• local: The background is fixed and does not scroll with its contents.

The declaration of this property is as under:

body {

  background: url(“mybackground.png”);

  background-attachment: fixed;

}

 

 

background-position

This property specifies the initial position for background image.

Any valid position can be specified.

The declaration of this property is as under:

body {

  background-image: url(mybackground.png);

  background-position: top;

}

 

background-clip

This property specifies the background painting area (where the background will be painted).

Valid values include:

• border-box – background is painted within the border box.
• padding-box – background is painted within the padding box.
• content-box – background is painted within the content box.

 

background-origin

This property specifies the background positioning area.

Valid values include:

• border-box – position is relative to the border box.
• padding-box – position is relative to the padding box.
• content-box – position is relative to the content box.

 

 

background-size

This property specifies the size of the background images.

Valid values include:

• border-box – position is relative to the border box.
• padding-box – position is relative to the padding box.
• content-box – position is relative to the content box.

 

 

Summary

In this article, we learned about CSS support for background which can be used in web pages. I hope you have found this information useful.

About the author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com

 

References

http://www.w3schools.com/css/css3_backgrounds.asp

http://www.w3.org/TR/css3-background/

http://www.w3schools.com/cssref/pr_background-color.asp