CSS3 Background Properties

CSS background properties are used to define the background style effects of an element.

Background-color:

background-color property used to apply only colors to an element in HTML. You can specify the format to color by:

• HEX-decimal like “#000FFF”
• Name of the color like “blue”
• RGB value like “rgb(0,0,255)”

The background color of a webpage is defined as follows:

body {
    background-color: #b0c4de;
}

Background-image:

If you like to have an image as background in a webpage you can use background-image property to specify the image with the extension and location. By default image is repeated in both ways so it covers entire element of the page.

    body {
        background-image: url("bg1.jpeg");
    }

Background-repeat:

By default, background-image property will repeat in both horizontally and vertically. Using background-repeat property you can repeat it only in horizontal or only in vertical. There are four values for repeat property as follows:

• repeat – default value, will repeat on both sides
• repeat-x – image will repeat only on horizontal side
• repeat-y – image will repeat only on vertical side
• no-repeat – image will not repeat. It will display only on

Background-position:

CSS3 background-repeat property specifies the background image only once.You can also change the position of the image, which will not affect the text.

Using background-position property you can specify the position of an image.

     body {
             background-image: url("img_tree.png");
             background-repeat: no-repeat;
             background-position: right top;
          }

Background Shorthand property:

To specify all background properties in a single line is possible and it is called as shorthand property.

This shorthand property for background is "background":

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

CSS3 Backgrounds:

CSS3 contains a few new background properties, which gives more control of an element.

CSS3 Background-size:

CSS3 background-size property allows you to specify the size of background images. This property allows you to re-use the images in different context sizes.

The size can be specified in length, percentage of both x-axis and y-axis or by using one of the other two values: contain and cover.

contain - scales the background image to be as large as possible which fits to the content area in both its width and height.

cover -  scales the background image to covered the content area completely which displays both its width and height are equal to or exceed the content area.

#box1 {
    background: url(flower_img.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

     
      #box2 {
            background: url(flower_img.jpg);
            background-size: cover;
            background-repeat: no-repeat;
        }

CSS3 Background-clip:

CSS3 background clip property used to specify the painting area of the background. It takes three different values:

• border-box – It’s a default value, which is painted to the outside edge of the border
•  padding-box – Makes the background is painted to the outside edge of the padding
• content-box – Makes the background is painted within the content box