CSS Backgrounds

CSS background defines background effect which is under.

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

Background Color

The background-color property specifies the background color of an element. The background color of a page is set like this.

Example

body {
background-color: lightblue;
}

Text Color

It can be specified color text.

Example

<h1 style=”color:Tomato;”>Hello World</h1>
<p style=”color:DodgerBlue;”>Lorem ipsum…</p>
<p style=”color:MediumSeaGreen;”>Ut wisi enim…</p>

Border Color

You can set the color of borders.

Example

<h1 style=”border:2px solid Tomato;”>Hello World</h1>
<h1 style=”border:2px solid DodgerBlue;”>Hello World</h1>

Background Image

The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. The background image for a page can be set like this.

Example

body {
background-image: url(“paper.gif”);

Background Image – Repeat Horizontally or Vertically

The background-image property repeats an image both horizontally and vertically. Some images should be repeated only horizontally or vertically.

Example

body {
background-image: url(“gradient_bg.png”);

Background Image – Set position and no-repeat

Its show only background property which represent background property.

Example

body {
background-image: url(“img_tree.png”);
background-repeat: no-repeat;
}

Background – Shorthand property

To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.

Example

body {
background: #ffffff url(“img_tree.png”) no-repeat right top;
}

When using the shorthand property the order of the property values is. It does not matter if one of the property values is missing, as long as the other ones are in this order.