CSS3 Backgrounds(Fg. 1)

    CSS3 contains several new background properties, which allow greater control of the background element.

In this chapter you will learn about the following background properties:

  • Background Size
  • Background Origin

   All web browsers (excluding Internet Explorer 8 and below) supports the background-size and background-origin property.

Fg. 1 (CSS3 Backgrounds)

div
{
background:url(img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
}
body
{
background:url(img_tree.gif),url(img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
}

Fg. 2.1 (CSS3 Background Sizes)

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

Fg. 2.2 (CSS3 Background Sizes)

div
{
background:url(img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
}

CSS3 Background Sizes(Fg.s 2)

The background-size property specifies the size of the background image.

Before CSS3, the background image size was determined by the actual size of the image. In CSS3 it is possible to specify the size of the background image, which allows us to re-use background images in different contexts.

The following box had its background resized.

I

Syntax

background-size: length|percentage|cover|contain;

You can specify the size in pixels or in percentages. If you specify the size as a percentage, the size is relative to the width and height of the parent element. (Fg. 2.1 & Fg. 2.2)

CSS3 Background Origin(Fg.s 3)

The background-origin property specifies the positioning area of the background images.

The background image can be placed within the content-box, padding-box, or border-box area.

Syntax

background-origin: padding-box|border-box|content-box;

The background-origin property specifies what the background-position property should be relative to. If the background-attachment property for the background image is "fixed", this property has no effect. (Fg. 3.1 & Fg. 3.2)

Fg. 3.1 (CSS3 Background Origin)

div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
}

Fg. 3.2 (CSS3 Background Origin)

body
{
background:url(img_tree.gif),url(img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
background-origin:padding-box;
}