CSS Background Basics
CSS Basics – Part 8
CSS Course
Foreword: In this part o the series, I talk about the basics of element background color and image.
By: Chrysanthus Date Published: 15 Dec 2015
Introduction
Background Color
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.
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
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;
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)
I will explain 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); I will say 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.
Background Image
The following syntax is used to give a background image to an element (box) in the normal way:
background-image: url(imageURL);
imageURL is the url ending with the filename of the image. Use a drawing program to create a jpg image of 400px X 200px. Name the image, myimg.jpg . Save the image in the same directory as the following code. Read and try the code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
<style type="text/css">
div
{
background-image:url(myimg.jpg);
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 image occupies the content and padding areas, stretching out if necessary.
Clipping the Background Image
You can decide to limit the background image 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.
Read and try the following code that limits the background image 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-image:url(myimg.jpg);
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>
The background-clip property used above is,
background-clip:content-box;
Clipping the Background Image to the Padding Box
Read and try the following code that clips the background image 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-image:url(myimg.jpg);
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>
The background-clip property used above is,
background-clip:padding-box;
Of course, to limit the background image 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-image:url(myimg.jpg);
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>
The background-clip property used above is,
background-clip:border-box;
In the above code the border is given the special color code value, rgba(0,0,0,0); I shall say more about this later.
Note: the thickness of the padding, border and margin strips in this tutorial have been exaggerated for emphasis.
The Background Repeat Property
You can have a small image, and make it repeat all over the background area of the body element or any other containing element. There are various ways of making the small image repeat. The property is:
background-repeat
It can have any of the following values: repeat-x, repeat-y, repeat, space, round or no-repeat.
repeat-x
With this value, the small image repeats in the background only in one line horizontally. Nothing stops you from making the small image bigger.
repeat-y
With this value, the small image repeats in the background only in one line vertically. Nothing stops you from making the small image bigger.
repeat
This value will repeat the image horizontally and vertically all over the background area.
space
With the above values, the repeated small image may be cut (clipped) at the right edge of the element and/or at the bottom edge of the element. With the value of “space”, the repeated image is not cut at any of the edges; this is because spaces are included in between the repeated images, pushing them apart and getting rid of the cut images.
round
With this value, no image is cut at any edge and no spaces are added. The images are either all slightly enlarged or slightly reduce, so that they fit the background area, as whole (complete) images; and so no image is cut.
no-repeat
With this value, the small image is displayed only once and there is no repeating. Nothing stops you from using a bigger image in place of the small image.
The initial (default) value for the background-repeat property is, repeat. For all these values, what I like is, round. Read and try the following code, with a small image of your choice, whose name you give as, smallimg.jpg :
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
<style type="text/css">
div
{
background-image:url(smallimg.jpg);
border-style:solid;
border-width:4px;
width:440px;
background-repeat:round;
}
</style>
</head>
<body>
<div>
<p>A paragraph.</p>
<p>Another paragraph.</p>
</div>
</body>
</html>
Background Image Positioning
Today, if you have an image, which is smaller than the size of the html element, you can choose where it would be positioned in the background area. In order to do this, you need to have the background-repeat property with the value, no-repeat, first. In this way, only a single image will be at the background and it would be at the original size (size it was created at, in the server). Next you should have a property called the background-position property. The property is typed as:
background-position
It has a pair of values separated by space. In simple terms, the possible pairs are:
left top, center top, right top, left center, center center, right center, left bottom, center bottom, right bottom.
There are nine pairs for nine background positions within the background area. The first value in the pair is for the horizontal position and the second value is for the vertical position. Read and try the following code
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
<style type="text/css">
div
{
background-image:url(smallimg.jpg);
border-style:solid;
border-width:4px;
width:440px;
background-repeat:no-repeat;
background-position: center center;
}
</style>
</head>
<body>
<div>
<p>A paragraph.</p>
<p>Another paragraph.</p>
</div>
</body>
</html>
Background Image at Original Size
If you want your background image to be at the browser, at the size in which it is at the server, then you have to use the background-repeat property and the value, no-repeat. Note, if you write code for your background image in the normal way and it is stretched out (because it was small), there may be loss of resolution. When coding for the background image in the normal way, choose an image, which is as large as the padding box or just slightly smaller.
Background Image and Background Color
You can have a background image as well as a background color for an element. However, the color will be behind the image. In other words, the user will see the image first and if parts of the image are transparent, he would see the color through the transparent parts.
Time to take a break. We stop here and continue in the next part of the series.
Chrys
Related Links
Basics of HTML 5Basics of ECMAScript
HTML DOM Basics
CSS Basics
CSS Rendering for HTML
Simple Guide to Website Design
CSS Multi-column Layout Module
Media and CSS
Responsive Web Design
More Related Links
PurePerl MySQL API
Major in Website Design
Perl Course - Optimized
Web Development Course
BACK NEXT