CSS Background

Background Color :

The background-color home identifies the backdrop shade of an element.
The background shade of a page is described within the body selector.

Example :

body {background-color:#b0c4de;}

a color is most often specified by:
  • a HEX value – like “#ff0000”
  • an RGB value – like “rgb(255,0,0)”
  • a color name – like “red”

Example :

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

Background Image :

The background-image house specifies a picture to make use of as the back ground of an element.
Automatically, the picture is recurring so it covers the entire element.
The back ground picture for a page may be set such as this:

Example :

body {background-image:url(‘paper.gif’);}

Automatically, the background-image home repeats an image equally horizontally and vertically.
Some photographs must certanly be repeated just horizontally or vertically, or they’ll search odd, such as this: 

Example :

body
{
background-image:url(‘gradient2.png’);
}

Shorthand property :

As you will see from the examples over, there are lots of qualities to think about when dealing with backgrounds.
To limit the rule, it is also possible to specify all of the qualities in a single property. This really is named a shorthand property.
The shorthand property for history is simply “background“:

Example :

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

When using the shorthand property the order of the property values is:
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
It does not matter if one of the property values is missing, as long as the ones that are present are in this order.


Posted in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *