- A Short History of Style for the Web
- What Is CSS?
- How Is CSS Used?
- Basic CSS Syntax
- The Basics of Selectors
- Basic Properties: Font Styles
- Inheritance
- Getting Specific: class and id Selectors
- Common Text Layout Properties
- Combinators: Descendant and Child Selectors
- Common Background Properties
- Dynamic Selectors
- Basic Page Layout
- Advanced Page Layout
- Positioning
- Advanced Selectors
- Display Types
- More Properties
- Media Types
- Importing Style Sheets
- Quality Assurance
- Specific Challenges and Techniques
This chapter is from the book
This chapter is from the book
This chapter is from the book
Common Background Properties
Since CSS1, CSS has provided a number of properties that let us style the background of an element.
It may seem an obvious thing, but before we go on, just what is an element's background? We'll see in a moment that every element has its own box that contains its content; the box includes margin, border, padding, and content, as shown in figure 4.3.
)
4.3 The box of an element is a rectangle, with margin, padding, border, and content. Note that margin, padding, and border widths and heights may all be zero.
The background of an element starts inside the border box—so applying a background color or image to an element does not apply the background to its margin, as demonstrated in figure 4.4.
)
4.4 The background of an element starts at its border box and does not fill the margin.
CSS3 lets developers specify where the background starts, both horizontally and vertically: the border box, padding box, or content box are all options, but the margin box is not. Alas, this and other advanced background properties like multiple background images are not yet widely supported in browsers and can be difficult to use with progressive enhancement.
background-color
The background-color property specifies the color of the background of an element. It can take all of the values that we saw for the color property, and one more—the keyword value transparent (note that this value is not valid for the color property). A transparent background-color means that the content "behind" the element is visible through the element. We'll look at how to create semi-transparent backgrounds using CSS3 in Chapter 13. To create a light gray background on an element, we use a statement like this:
p {
background-color: #b3b3b3
}
|
It's important, when specifying a background color, to ensure sufficient contrast with the text color so that the text will be legible. We look at this issue in some more detail in Chapter 6, but one good practice is to make sure you always specify a color when you specify a background color (the CSS validator will give you a warning to this effect).
background-image
The background-image property, which specifies a background image for an element, is one of the most commonly used features of CSS. It can be used to create patterned backgrounds behind whole pages or large sections of a page; to add icons (such as a PDF icon for a link to a PDF file); even to add "bullets" to lists—although there's another a property designed expressly for this purpose.
A background image might be a single large image, or an image that's tiled horizontally, vertically, or both. Background images can be positioned anywhere on the background of an image, though only in CSS3 can they be resized, and this feature has little support in browsers, so is as yet of little real-world value.
A background image is added to an element using the background-image property. This takes a URL value, which is a relative or absolute URL for the image file. The PNG, GIF, and JPEG formats are supported in all browsers, though some browsers also support other formats (such as PDF in Safari and SVG in Opera). Because of the limited support for formats other than these three main formats, only these formats should be used in most situations. As mentioned with the HTML img element in the last chapter, PNG is to be preferred for non-photographic images, and JPEG for photographic images.
URL Values
URL values in CSS have the form of a relative or absolute URL inside parentheses, and are preceded by the string url wrapped in single or double quotation marks, like this:
url("path/to/image.png")
|
Here we'll add the background image in figure 4.5 to the body element:
body {
background-image: url("./images/shadow.png");
}
|
)
4.5 The background image for our body element
And here's the effect [4.6], which is almost certainly not what we want.
)
4.6 Our background image, tiled horizontally and vertically
background-repeat
So what's going on here? By default, a background image repeats both horizontally and vertically, creating a tiling effect. In this case, that's not what we want. The effect we are trying to achieve is a shadow on the right-hand side of the page. So, we'll need to repeat the image vertically but not horizontally. We can specify how an image repeats with the background-repeat property. This property takes one of these keyword values:
- repeat—The default value that repeats the image in both directions.
- no-repeat—Means the image is only shown once.
- repeat-x—The image is repeated horizontally but not vertically.
- repeat-y—The image is repeated vertically but not horizontally.
In this instance, we want to repeat vertically, so we'll use background-repeat: repeat-y [4.7].
)
4.7 Our shadow image, repeated vertically
If you can't make out where the shadow has gone, it's now down the left-hand side of the page. What we want to do is position it down the right-hand side of the element, which we can do with background-position.
background-position
The background-position property lets us specify where the image will be placed, or if it is repeated, where the repeat starts from. We can specify the position of a background image for an element in a number of ways.
Keywords
The background-position property can take one or two keywords. If a single keyword is used, it applies to both horizontal and vertical position. If two keywords are used, the first applies to horizontal position, and the second applies to vertical position. Regardless of the keyword chosen, it's important to note that the image tiles to fill the background horizontally, vertically, or in both directions. The keywords are:
- top—The image is placed, or repeats, vertically from the top down.
- center—The image is placed, or repeats, horizontally from the center of the element left and right, and vertically from the center of the element up and down. Note that the background image when repeated always repeats in both directions (up and down, or left and right).
- bottom—The image is placed, or repeats, vertically from the bottom up.
- left—The image is placed, or repeats, horizontally from the left-hand side of the element to the right.
- right—The image is placed, or repeats, horizontally from the right-hand side of the element to the left.
In this instance, we want the element to be repeated from the top down, and to be placed at the right-hand side of the element. We'd do this by using background-position: right top.
Length Values
It's possible to explicitly specify where the image will be placed or repeated from with one or two length values. For example, we might specify that a background image is placed 5 em from the left edge of an element using background-position: 5em.
With length values, unless the width of our element is fixed, it's not possible to achieve the objective of putting the image at the right side of the element.
Percentage Values
A particularly technical way we can specify background image position is using percentage values. Unlike length values, where the value specifies a vertical or horizontal offset for the top or left of the element, percentages are more subtle again.
With a percentage value of, for example, 60%:
background-position: 60%
|
we aren't specifying that the left edge of the background image is 60% from the left edge of the element, but that a point 60% from the left edge of the image horizontally is aligned with a point 60% from the left edge of the element horizontally, as shown in figure 4.8.
)
4.8 Percentage background-position values align a point on the background image with a point on the element.
Figure 4.9 shows these different positioning approaches together.
)
4.9 background-position with keywords, length values, and percentages
Although it sounds quite complex, it gives great flexibility when aligning background images with their elements. In the current situation, where we are looking to put the shadow image at the right of the element, we can use background-position: 100%.
This doesn't put the left-hand edge of the image 100% across the background of the element—which would essentially hide the image to the right of the element—but rather aligns the point 100% across the image with the point 100% across the element, so that their right edges are aligned.
Figure 4.10 shows our page with the shadow now aligned with the right edge of the body element.
)
4.10 The shadow image aligns with the right edge of the body element.
background-attach
With the current example it might not make much sense, but it's possible to "fix" an image on the background, so that when the content of the element is scrolled, the image remains fixed in its location on the background. We do this with the background-attach property, which takes two possible keyword values: scroll and fix. For example, if we had a single large watermark-style image as the background of a page:
body {
background-image: url('../watermark.png');
background-repeat: no-repeat;
background-position: center;
background-attach: fix
}
|
then, when the page is scrolled, the watermark remains horizontally and vertically centered on the page, and the text and other content of the page scrolls over the top of it. scroll is the default value for the property.
CSS3 Background Properties
CSS3 introduces several new background properties, including the ability to specify multiple background images (we cover this in Chapter 13), to resize the background image, and to specify where the image fills from—the border, padding, or content box, not just the padding box, as is the case now. As noted briefly, none of these properties is very widely supported in contemporary browsers and should be used very carefully if at all at present, as their use can easily render content unreadable.
Shorthand Properties
CSS provides a way for some sets of properties to be specified with a single shorthand. For example, we can specify all of the background properties for a single statement with the one shorthand property background. We simply put each of the individual values separated with spaces as the value for the shorthand. For example, our shadow shorthand would look like this:
background: url('../shadow.png') repeat-y top right;
|
It's important not to mix shorthand and regular properties in a single statement. When you use a shorthand, all of the properties associated with that shorthand are applied—including defaults for any property you've not explicitly set a value for in the shorthand. In our example, the default value of background-attach (scroll) would be specified even though we've not set it explicitly. Why is this important? Well, if you'd previously specified a background-attach value of fix in the same statement, the shorthand overrides this, because the shorthand is further down the style sheet. This is a subtle problem that can catch developers and cause considerable confusion. The best way to avoid it is to use either shorthand or "longhand" properties, but to not mix them together.