css3 backgrounds

css3 provide new background properties, which allow better control of the background of an element.

there are following  css3 background properties.

  • background-origin
  • background-clip
  • background-size

css3 background properties browser support

propertybrowser support
background-size
background-origin

internet explorer9, firefox 4,chrome, safari 5 and opera support the new background properties.

   


multiple background images

css3 allows web designers to specify multiple background images for box elements,using nothing more than a simple comma-separated list.

  effects multiple background images.

      <style type="text/css" >
      
   .multiple_image_background{
   
          background-image:url('\images\\multiple_background.jpg'), 
          
          url('\images\\opacity_box.jpg');
          
          background-color:#efeffe ;
          
          background-attachment:scroll,scroll ;
          
          background-repeat:no-repeat,no-repeat ;
          
          background-position:top left,top right ;
          
          margin:20px ;
          
      }</style>

Css3 background-size

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

Css3 background-size - possible values

  • background-size:  contain;   scales down image to fit element.
  • background-size:  cover;   expands image to fill element.
  • background-size:  100px 90px;  scale image to the size indicated.
  • background-size:  50% 100%;  

background-size:190px 80px;

background-size:100% 100px;

background-size:100% 100%;


      <style type="text/css" >
      
  .background_size_first_img{
  
  	        background-image:url('\\bac_size.jpg') ;
  	        
          	background-color:#efeffe ;
          	
          	background-attachment:scroll ;
          	
          	background-repeat:no-repeat ;
          	
          	background-size:190px 80px ;
          	
          	width:200px ;
          	
          	height:130px ;
          	
      }</style>

Css3 background-origin property

background-origin property allows you to specify whether the background will be positioned relative to the 'content box', 'border box' or the 'padding box'.

css3 background-origin property possible values :-

  • background-origin:  border-box;   background-position is calculated from the border.
  • background-origin:padding-box; background-position is calculated from the padding-box.
  • background-origin:content-box;  background-position is calculated from the content-box.

background-origin:border-box;

background-origin:content-box;

          
          <style type="text/css" >
          
  .background_origin_for_first_effect{
  
  		        background-image:url('\images\background_origin1.jpg') ;
  		        
          		background-color:transparent ;
          		
          		background-attachment:scroll ;
          		
          		background-repeat:no-repeat ;
          		
          		background-origin:border-box ;
          		
          		-webkit-background-origin:border-box ;
          		 
          		padding:10px 0px 15px 15px ;
          		
          		border:2px dotted #efeffe ;
          		
          		width:190px ;
          		
          		height:180px ;
          }
          </style>

second background-origin example

          <style type="text/css" >
          
  .background_origin_for_first_effect{
  
  		        background-image:url('\background_origin1.jpg') ;
  		        
          		background-color:transparent ;
          		
          		background-attachment:scroll ;
          		
          		background-repeat:no-repeat ;
          		
          		background-origin:content-box ;
          		
          		-webkit-background-origin:content-box ;
          		 
          		padding:10px 0px 15px 15px ;
          		
          		border:2px dotted #efeffe ;
          		
          		width:190px ;
          		
          		height:180px ;
          
          }</style>

css3 background properties.

propertydescription
background-sizespecifies the size of the background images.
background-originspecifies the position area of the background images.
background-clipcss background-clip property specifies the painting area of the background images.