CSS3 Background Image
CSS3 Basics - Part 15
Forward: In this part of the series, we look at CSS3 background image coding.
By: Chrysanthus Date Published: 23 Jul 2012
Introduction
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.
Having a Background Image in the Normal Way
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.
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 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.
Limiting the Background Image to the 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;
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;
Clipping the Background Image 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 image 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 of the border:
rgba(0,0,0,0)
We shall know the meaning of this code later. 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); we shall see more about this later.
Note: the thickness of the padding, border and margin strips in this tutorial were exaggerated for emphasis.
You can have a small image, and make it to 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 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 default (initial) 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>
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>
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
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT