Web Design 101: Backgrounds
Share your comments on this topic with other web professionals
In: Columns > Web Design 101
Published on May 21, 2007
The CSS background property allows you to apply background colors and images to elements as required. But there are plenty of strange quirks and bugs that may surprise the unwary developer.
What is the background anyway?
The background of an element is the total width and height of the element, and includes the padding and borders that have been set on that element. It does not include the margins of the element. Therefore a background applied to an element will be underneath the foreground content of that element and include the padding, and it will also be underneath any borders that have been declared.
If an element has transparent borders, you should see the image underneath the borders—but note that IE6 and older don’t support transparent borders, and get this part of the spec wrong anyway, as the background only goes to the inside edge of the borders.
This is best demonstrated with a small example that you can test in IE6 and Firefox to compare the differences.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Background test</title>
<style type="text/css">
#test{
width: 100px;
height: 100px;
background: red;
border: 10px dashed green;
}
</style>
</head>
<body>
<div id="test">test</div>
</body>
</html>I have used green dashed borders so you can see the background in the gaps. As you can see, in IE (including IE7) the background color only reaches the inside edge of the border, whereas most other browsers slide the background color right under the border until it meets the outside edge of the container.
In day-to-day usage this is rarely a problem, but is something you should be aware of.
Background Properties
In most cases, the following will refer to both block level and inline elements, with the exception that the tiling and positioning of the background-image on inline elements is undefined in the CSS2.1 specification.
The background properties are:
background-colorbackground-imagebackground-repeatbackground-positionbackground-attachmentinherit
Let’s look at each of the properties in turn, how they work, and what they do.
background-color
Possible values: color | transparent | inherit
As you might expect, this simply sets the background color of an element. It can be specified in several different ways:
background-color: #000000;or in three digit pairs:
background-color: #000;You can also use one of the available color keywords instead:
background-color: red;Or finally, you can use the rgb color method:
background-color: rgb(0,0,0);(The W3C has more information on the different methods of applying color.)
The initial, or default, value of an element’s background is transparent—this allows an element to be placed on top of another element, and allows the background to shine through. It will not usually be necessary to declare this, unless you are overriding a previous background color that was set for this element.
Incidentally, a good habit to get into is to always set a foreground color at the same time you set a background color, to avoid the possibility of both the foreground and background being the same or a very similar color (either through inheritance or via user stylesheets). While you cannot always do this—for example if your background is transparent—is something to bear in mind and to check while coding.
When you apply a background-color to an element, there must be some part of that element visible for the background to show. If the element has no height—as is the case when it contains only floated children—then there will be no background color visible. This is a common mistake by beginners, and you must ensure that your container actually takes up some space on the screen if you want your background to be seen.
background-color: inherit;—Inherit allows the element to inherit its parent’s background-color. It is often mistakenly thought that background colors are inherited by default, but this is not the case—the fact that you can see the parent’s background color on a child element is because the child element’s background is transparent.
background-image
Possible values: uri | none | inherit
The background-image property allows you to place an image in the background of the element concerned—all that is needed is to set the correct path to the image:
background-image:url(example-image.gif);Note that the path of the image is relative to the location of the css file, and not the html page that calls it, so make sure you are pointing to the correct location—here, assuming that our CSS is in a /css folder, we are pointing to an image located in the /images folder which is at the same level as the CSS folder:
background-image:url(../images/example-image.gif);There is no need to wrap quotation marks around the url—they are optional—but using them is valid:
background-image:url("../images/example-image.gif");Single quotation marks are also allowed—however, singles trigger a bug in IE5/Mac which will hide your background images altogether.
By default, the image will be placed at the top left corner of the element, and will be tiled (repeated). It will also scroll with the document. These are the default settings, but you can adjust all these settings with specific properties:
Here is a basic example of a background image applied to the <body> element:
body {
margin: 0;
padding: 0;
background-image: url(images/dw-star.jpg);
}The above code will tile the star image, starting from the top left corner of the body and continuing until the end of the line is reached. Then a new line will be tiled underneath, and so on until the whole body element is completely filled.
Note that the image doesn’t wrap at the end of each line—a new complete image will begin on the next line. There is also no way to adjust the spacing of the tiling (apart from adding space to the image itself).
Placing a background image will have no effect on the size of the element, so you must ensure that there is enough height and width for the image to be displayed, or enough content to stretch the container.
background-image: none;—I think you can guess what this one does—it simply ensures that no image is displayed behind that element.
background-image: inherit;—To inherit the background image from a parent, you can use the value inherit, although it would be rare to use this. It results in images being re-tiled on the child element, and overlaying the parent’s background image—potentially very messy, as the images would not be perfectly aligned.
background-repeat
Possible values: repeat | repeat-x | repeat-y | no-repeat | inherit
This property allows you to define the direction in which the background image is repeated, or to prevent repeating altogether.
background-repeat: repeat;—The default value repeats the image along both the horizontal and vertical axis. (This doesn’t mean that the image is only repeated from right to left and top to bottom, but that the image is repeated along both axes, in both directions, until the whole area is tiled as shown in image 1 above.)
background-repeat: repeat-x;—When you set the value to repeat-x, the image will only be repeated horizontally. It is repeated in both horizontal directions until the whole row is tiled. The default starting position is the top left, but this can be changed—see background-position below.
As you can see in the above image, only the x-axis (horizontal) is filled by our star image.
background-repeat: repeat-y;—This has the opposite effect of repeat-x—instead of repeating horizontally, the image will be repeated in the vertical direction only. As before, the image will be tiled up and down the vertical axis until the whole column is filled.
background-repeat: no-repeat;—This prevents tiling of the image. The image is placed at the specified background-position—if no position is provided, then that will default to the top left of the element.
background-repeat: inherit;—Causes an element to inherit the background-repeat property from its parent, and is not something that you would normally need to use.
background-position
Possible values: fixed length units (e.g. pixels) | percentage units | keywords
When you place a background image, you can specify its starting position in a number of ways—the simplest is to specify the exact position in pixels.
background-position: 100px 200px;—This will place the image’s top left corner 100px from the left edge of the element and 200px down from the top of the element—the position is always given as horizontal and then vertical. If only one length value is used, it is assumed to be for the horizontal position only—the vertical position defaults to fifty percent.
When used in conjunction with a repeating background (see the images above), the position specified is the position at which the image will be placed to start with—it is then repeated along the horizontal and/or vertical axes, depending on the type of background-repeat that has been set. The image will be repeated in both directions along each axis.
background-position: 50% 100%;—When using percentages to position a background image, things are handled a little differently. The percentage measurement not only refers to the position within the element itself but it also refers to that specific point in the image. If you were to set background-position: 50% 100%, the 50% horizontal position of the image (the exact center, in other words) would be aligned with the 50% position of the element, and the 100% vertical position of the image—its bottom edge—is aligned with the 100% vertical position of the element (i.e. its bottom edge).
It may be easier to explain by comparing background-position: 50% 50% to the equivalent if you were using absolute positioning. If you specified position: absolute with left: 50% and top: 50%, this would move the element’s top left corner into the dead center of the parent—the element itself wouldn’t be centered, it would be in the bottom right quadrant of its parent.
However, when percentage is used in the background-position property, it doesn
Share your comments with other professionals (15 comments)
Related Topics: CSS, Basics, Web Design
Paul O'Brien, when he's not working, can usually be found handing out advice in the CSS Forums at Sitepoint where he is an advisor. He works as a freelance Web Designer specialising in CSS layouts only.
