Introduction to CSS3 : Part 2

Introduction

 
Welcome back to the second part of "Introduction to CSS3". I hope you've already read my previous article "Introduction to CSS3: Part 1" which is the introductory part. In today's article, we'll continue from borders and learn all about backgrounds in CSS3. 
 

2. Backgrounds in CSS3

 
You guys might have already used background properties several times in CSS but CSS3 includes many new background properties and it allows developers to have more control over the background elements. There are three main properties that we'll learn as follows:
  • background-size
  • background-origin
  • background-clip
You will also learn the use of "multiple backgrounds" and "multiple images".
 
Browser Support
 
1 browser support.png
 

i) background-size

 
In CSS, the size of the background image was identified by the actual size of the image whereas in CSS3 you can easily define the size of the background image. You can also re-use the background image in other situations.
 
The size of the background-image can be defined in a percentage or in pixels. If the size is a percentage then it is relative to the height and width of the parent element.
 
Example 1:
  1. #bg-size {  
  2.         border1px dotted #ff6a00;  
  3.         backgroundurl(spotlights.png);  
  4.         background-size100px 40px;  
  5.         background-repeatno-repeat;  
  6.         padding-top30px;  

Output
 
1 Eg CSS.png
 
Original Image
 
2 spotlights.png
 
Example 2:
  1. #bg-stretch {  
  2.     border1px dotted #4cff00;  
  3.     background#ff6a00 url(spotlights.png);  
  4.     background-size100% 100%;  
  5.     background-repeatno-repeat;  
  6.     padding-top30px;  
  7.     color#fff;  

Output
 
3 Eg CSS.PNG
 

ii) background-origin

 
The background-origin is a property that defines the positioning area of the background images. You can place the background image within the "border-box", "padding-box" or "content-box" area.
 
4 background-origin.PNG
 
Hope you understand my point. Now let's have a look with this example:
  1. div {  
  2.     width400px;  
  3.     border2px solid #ff6a00;  
  4.     padding30px;  
  5.     background-imageurl('cam.png');  
  6.     background-repeatno-repeat;  
  7.     background-positionleft;  
  8. }  
  9.    
  10. #bg-origin1 {  
  11.     background-origin: border-box;  
  12. }  
  13.    
  14. #bg-origin2 {  
  15.     background-origin: content-box;  

Output
 
5 Eg background-origin.PNG
 

iii) background-clip

 
The background-clip property defines the painting region of the background. Let's have a look at its syntax
 
background-clip: border-box or padding-box or content-box;
 
Let's see an example :
  1. div {  
  2.     width300px;  
  3.     border2px solid #ff6a00;  
  4.     padding40px;  
  5.     background-color#def25a;  
  6.     background-clip: content-box;  

Output
 
6 Eg background-clip.PNG
 

iv) Multiple Background & Multiple Images

 
In CSS3, you can use multiple backgrounds and also multiple images for an element. It helps you to create complex effects without creating extra markup in your HTML code. To create multiple backgrounds the syntax is the same; you need to add a comma to separate them and you are done.
Let's have an example of a div and use multiple images within a div having a gradient background.
 
Example:
  1. #multi {  
  2.     height300px;  
  3.     width400px;  
  4.     backgroundurl(knockout.jpg), url(Captain.jpg);  
  5.     background-repeatno-repeat;             
  6.     border2px solid #000;  

Output
 
7 Eg background-image.PNG
 

Conclusion

 
In this article you learned all about CSS3 background properties. Try to use these properties next time in your code. In the next article, I'll cover all about "text-effects" and "fonts" in CSS3. 


Similar Articles