1. background-size
2. background-origin

1. contain: The Image is resized so it fits the container or we can say that the image is resized in such a way that its width and height(the bigger one) will not exceed the container’s dimensions. Note: original size of the image is 400px x 400px.

         .div{
              background:url(phpmind-background-size-image.jpg);
   	   background-size: contain;
   	   background-repeat:no-repeat;
   	   width: 600px;
              height:300px;
   	   border:1px solid #999;
              }
2. cover: The keyword “cover” is also accepted by the background-size property. The image is resized in such a way that either its width and height (the smaller one) covers the whole container but the image could be cropped if the image has a different aspect ratio.

              .div{
   		background:url(phpmind-background-size-image.jpg);
   		background-size: cover;
   		background-repeat:no-repeat;
   		width:	600px;
   		height:300px;
   		border:1px solid #999;
   		}
3. length: It helps us to define the width and height of the background image. The first value represents the width of the image and the second value represent the height. If only one value is mentioned then it is assumed as a width and height is set to “auto”.

               .div{
              	background:url(phpmind-background-size-image.jpg);
   		background-size:200px;
   		background-repeat:no-repeat;
   		width:	500px;
   		height:300px;
   		border:1px solid #999;
            	}
4. percentage: If the value is given in percentage then the size of the background image is relative to the parent element. The first value represents the width of the image and the second value represent the height. If only one value is mentioned then it is assumed as a width and height is set to “auto”.eg: If the width and height of the background-size is set to 80% 50% respectively then the image will cover 80% width and 50% height of the parent element.

               .div{
              	background:url(phpmind-background-size-image.jpg);
   		background-size:80% 50%;
   		background-repeat:no-repeat;
   		width:	500px;
   		height:300px;
   		border:1px solid #999;
            	 }

Browser support: Firefox 4+, Safari 5+, IE9+, Chrome, and Opera.

1. content-box:  The background image will be placed under the content div or It is relative to the content box.

               .div{
              	background:url(phpmind-background-origin.jpg);
   		background-origin: content-box;
   		background-repeat: no-repeat;
   		width:	300px;
   		height:300px;
   		padding:20px;
   		border:10px dotted #39C;
            	   }
2. padding-box:  The background image position is relative to the defined padding. The background image will cover the padding area also.

               .div{
              	background:url(phpmind-background-origin.jpg);
   		background-origin: padding-box;
   		background-repeat: no-repeat;
   		width:	300px;
   		height:300px;
   		padding:20px;
   		border:10px dotted #39C;
            	   }
3. border-box:  The background image position is relative to the border of the element.

               .div{
                    background:url(phpmind-background-origin.jpg);
   	         background-origin: border-box;
   		background-repeat: no-repeat;
   		width:	300px;
   		height:300px;
   		padding:20px;
   		border:10px dotted #39C;
            	   }

Browser support: Firefox 4+, Safari 5+, IE9+, Chrome, and Opera.

            .div{
                 background:#9CC;
		background-clip: content-box;/*padding-box, border-box or content-box as per need*/
		background-repeat: no-repeat;
		width:	100px;
		height:100px;
		padding:20px;
		border:10px dotted #39C;
		float:left;
         	}

Browser support: Firefox, IE9+, Chrome, Opera and Safari.