CSS3 Backgrounds

Since css2, we were using background images. But there were some limitation( in css2 ) that only one image can be used for a single element. Another limitation were that background images with background-repeat:no-repeat are for fixed elements only. For liquid elements like body, background images are full only if screen resolution and image size are same. But CSS3 introduced background size property to overcome this issue.

CSS3 Background size property allow us to change size of background images. Default size for a background image is actual size of image. We can set Background size of image in px, %, cover and contain.

Background Size Values

Background Origin property specify background area for background image, this could be border-box, content-box or padding-box.

Background origin will not work if background-attachment is fixed.

Background Origin Values

Change Background Origin

background-clip property set from where background-color or background-image should starts, i.e border-box, padding-box or content-box.

Background Clip Values

Change background clip

<style>
h1{
  background: linear-gradient(180deg,red 40%,blue 60%);
  -webkit-background-clip: text;
  color: transparent;
}  
</style>

<h1>Background clip text</h1>

Multiple backgrounds were introduced in css3. Using this property, when can add Multiple backgrounds images with color, and multiple background gradients in a single element. Hera are some examples of how to use multiple background images.

            
<style>
    .box{
        background:url(x.png), url(y.png), url(z.png), #000;
    }
<style>        

<div class="box"></div>

          

            
<style>
    .box{
        background:url(x.png) repeat-x left top,
        url(y.png) repeat-y left top, 
        url(z.png) no-repeat center top, 
        #ccc;
    }
<style>        

<div class="box"></div>