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

 

 

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:

#bg-size {
        border: 1px dotted #ff6a00;
        background: url(spotlights.png);
        background-size: 100px 40px;
        background-repeat: no-repeat;
        padding-top: 30px;
}

Output

 

 

Original Image

 

 

Example 2:

#bg-stretch {
    border: 1px dotted #4cff00;
    background: #ff6a00 url(spotlights.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-top: 30px;
    color: #fff;
}

Output

 

 

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.

 

 

Hope you understand my point. Now let's have a look with this example:

div {
    width: 400px;
    border: 2px solid #ff6a00;
    padding: 30px;
    background-image: url('cam.png');
    background-repeat: no-repeat;
    background-position: left;
}

#bg-origin1 {
    background-origin: border-box;
}

#bg-origin2 {
    background-origin: content-box;
}

Output

 

 

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 :

div {
    width: 300px;
    border: 2px solid #ff6a00;
    padding: 40px;
    background-color: #def25a;
    background-clip: content-box;
}

Output

 

 

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:

#multi {
    height: 300px;
    width: 400px;
    background: url(knockout.jpg), url(Captain.jpg);
    background-repeat: no-repeat;
    border: 2px solid #000;
}

Output

 

 

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.