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
