Introduction to CSS3 : Part 2

Welcome back to the second part of "Introduction to CSS3". I hope you've already read my previous article "Introduction to CSS3: Part 1" that 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 on 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.