CSS3 Background Coloring

CSS3 Basics - Part 14

Forward: In this part of the series we look at CSS3 background coloring.

By: Chrysanthus Date Published: 23 Jul 2012

Introduction

This is part 14 of my series, CSS3 Basics. In this part of the series we look at CSS3 background coloring. I assume you have read the previous parts of the series before reaching here, because this tutorial is a continuation.

Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.

Normal Background Coloring
The following syntax is used to give a background color to an element (box) in the normal way:

    background-color: colorValue

The colorValue is the name of the color or the rgb code. Read and try the following program:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
<style type="text/css">
    div
        {
            background-color:fuchsia;
            border-style:solid;
            border-width:30px;
            padding:30px;
            margin:30px
        }
</style>
</head>
<body>
    <div>
        <p>A paragraph.</p>
        <p>Another paragraph.</p>
    </div>
</body>
</html>

In the normal way, the background color fills the content and the padding areas.

Background Box Naming
The content area of an element is called the content-box. The area of the padding rectangular strip including the area of the content, are together called the padding-box. The area of the border rectangular strip, including the area of the padding strip and including the area of the content are together called the border-box.

Clipping the Background Color
You can decide to limit the background color to only the content-box or to only the padding-box or to only the border-box. To do this, you need the background-clip property. The value of the background-clip property can be, border-box or padding-box or content-box.

Clipping the Background Color to the Content Box
Read and try the following code that clips the background color to the content-box, and note the use of the background-clip property:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
<style type="text/css">
    div
        {
            background-color:fuchsia;
            border-style:solid;
            border-width:30px;
            padding:30px;
            margin:30px;
            background-clip:content-box;
        }
</style>
</head>
<body>
    <div>
        <p>A paragraph.</p>
        <p>Another paragraph.</p>
    </div>
</body>
</html>

In the above code, the background-clip property is used as follows:

            background-clip:content-box;

Clipping the Background Color to the Padding Box
Read and try the following code that clips the background color to the padding-box, and note the use of the background-clip property:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
<style type="text/css">
    div
        {
            background-color:fuchsia;
            border-style:solid;
            border-width:30px;
            padding:30px;
            margin:30px;
            background-clip:padding-box;
        }
</style>
</head>
<body>
    <div>
        <p>A paragraph.</p>
        <p>Another paragraph.</p>
    </div>
</body>
</html>

In the above code, the background-clip property is used as follows:

            background-clip:padding-box;

Clipping the Background Color to the Border Box
Note that the border is displayed in front of the background color or background image of the element. So in order for you to limit the background color to the border-box, you have to make the border strip transparent. To make the border strip transparent, you use the following code value for the color property of the border:

    rgba(0,0,0,0)

We shall know the meaning of this code later. Of course, to limit the background color to the border-box, you need, �border-box� as the value to the background-clip property. Read and try the following code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
<style type="text/css">
    div
        {
            background-color:fuchsia;
            border-style:solid;
            border-width:30px;
            border-color:rgba(0,0,0,0);
            padding:30px;
            margin:30px;
            background-clip:border-box;
        }
</style>
</head>
<body>
    <div>
        <p>A paragraph.</p>
        <p>Another paragraph.</p>
    </div>
</body>
</html>

In the above program, the border is given the special color code value, rgba(0,0,0,0); we shall see more about this code value later. The two statements in the above program to take note of now are:

            border-color:rgba(0,0,0,0);
            background-clip:border-box;

Note: the thickness of the padding, border and margin strips in this tutorial were exaggerated for emphasis.

That is it, for this part of the series. We continue in the next part.

Chrys

Broad Network

CSS3 Background Coloring

CSS3 Basics - Part 14

Introduction

Related Links

Comments