Child

CSS3 Background


« Previous Next Chapter »

CSS3 Backgrounds is an affords, which is used to re sizing of background properties. It is also used for multiple background implementation. Before developing of CSS3 it was unable to re size the background, but with the help of CSS3We can implement these affords also.

There are mainly two properties of background, which can be used for background fixingbackground sizemultiple background image and e.t.c.

Following are the two properties:

  • background-size
  • background-origin

Background-size:  is a such properties which is used to fix the size of a background. It can be either in pixel format or in percentage format

Below is the output:

And Below is the original image:

css3

Here is the code

body
{
background:url(your image file name with path);
background-size:90px 30px;
-moz-background-size:90px 30px; /* For Firefox */
-webkit-background-size:90px 30px; /* For Safari and Google Chrome Browser*/
-o-background-size:90px 30px; /* For Opera */
background-repeat:no-repeat;
padding-top:20px;
}

Background-origin:

 is a such properties which is used to define the position of background. The background-origin properties is used the specify the area of the background, that where it should be displayed on the page.

There is two properties of background-origin:

  • background-origin:border-box;
  • background-origin:content-box;
This div containing the image with border-box property. This div containing the image with border-box property. This div containing the image with border-box property. This div containing the image with border-box property. This div containing the image with border-box property. This div containing the image with border-box property. This div containing the image with border-box property.
This div containing the image with contant box property. This div containing the image with contant box property. This div containing the image with contant box property. This div containing the image with contant box property. This div containing the image with contant box property. This div containing the image with contant box property. This div containing the image with contant box property.

Here is the code

#div1
{
border:1px solid red;
padding:25px;
background-image:url('your image file name');
background-repeat:no-repeat;
background-position:left;
background-origin:border-box;
}
#div2
{
border:1px solid red;
padding:25px;
background-image:url('your image file name');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

Multiple Backgrounds:

is a such term which is used to set the multiple background on a single page.

body
{
background-image:url(your first image name with full path),url(your another image name with full path);
}