User:Bartlett/11
Hour 11. Backgrounds and Background Colors[wax ka badal]
- What You'll Learn in This Hour
- More using about the background-color property
- How to use background and foreground colors together effectively
- How to set a background image and how to control the display of that background
- Which types of images you can use as backgrounds
In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch02.html#ch02 Hour 2], "Getting Started with CSS," you learned how to use the background-color property to change the appearance of HTML elements. Background colors can be used to good effect in web design to group related items together, or to highlight important parts of the page. In addition to pure colors, you can also use images as backgrounds for the whole page or for any element on the page. |}
./ ADD NAME=CH11LEV1SEC1.HTML
Setting Background Color[wax ka badal]
As you've learned already, the background-color property is used to set the background of an HTML element and is written like this:
selector { background-color: color; }
This property is similar to the bgcolor attribute in HTML. The CSS version of background colors is a lot more useful, if just because it can be applied to anything. The bgcolor attribute can be set only on <body>,
, ,| , and | tags. CSS selectors, such as class selectors, id selectors, and :link and :visited pseudo-class selectors, let you change the background colors for specific parts of the page.
The background-color Property Like the foreground colors discussed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10], "Text Colors and Effects," a background-color can be specified in a number of ways: color name, RGB codes, triplets of numbers, or triplets of percentages. Here are some examples of background color declarations: h1 { background-color: white; }
h2 { background-color: #FFFFFF; }
h3 { background-color: #FFF; }
h4 { background-color: rgb(255, 255, 255); }
h5 { background-color: rgb(100%, 100%, 100%); }
In addition to color values, background-color can take two other values: TRansparent and inherit. The transparent value is actually the default for all elements; TRansparent means that whatever background already exists will be shown. So if a background-color of blue is set on the <body>, all elements that don't have a background-color setting are TRansparent and thus are blue. This actually isn't the same as inheriting the value because background-color doesn't naturally get inherited from the containing block. If you really need the background-color property to inherit, you can use the value inherit. In practice, transparent and inherit almost always have the same effect, although there are a few cases when you'd need to use inherit instead of TRansparent. Remember that inherit is the same as setting a value equal to that of the containing block's value, whereas TRansparent just makes the background so that it can be seen through. It is the difference between painting the ceiling blue and installing a window on the roof. If the sky is blue anyway, they'll look about the same. Backgrounds and Foregrounds When you're setting background and foreground colors in CSS, it's very important to make sure that your color choices will be usable by your audience. You'll need to worry about both the contrast of your color choices and the completeness of your color declarations. Lack of contrast between your foreground and background colors can make your page difficult for a variety of users to use. Those who have poor vision will struggle to see the letters, and users of limited or black-and-white displays may be left out as well. Printed pages can also suffer from contrast problems. When considering contrast, you also have to take the needs of users with color blindness into account; if someone can't distinguish between red and green, they may not be able to make out your green heading on a red background. It's not just users with specific disabilities who have problems with low contrast text; many people find text or images that have poor contrast to be harder to read. High contrast between foreground and background makes your site more useable by everyone, not just users with specific needs. Did you Know?
An excellent site for color advice is Bob Stein's VisiBone website at http://www.visibone.com/. Bob offers color charts as well as suggestions on testing your site for use by color-blind users. You can also check how users with color vision deficiencies view websites by visiting http://www.vischeck.com/.
In addition to contrast, you also have to consider completeness. By this I mean that if you specify a foreground color, you also need to specify a background color. Don't assume that all users have the same initial background and foreground colors that you do! For example, let's say you write the following rule: h1 { color: black;
font-family: Verdana, sans-serif; }
becomes invisible black-on-black by this rule!
So if you want it to be visible, you have to set the background color explicitly whenever you set the foreground colorsomething like this:
h1 { color: black;
background-color: white;
font-family: Verdana, sans-serif; }
Using Background ImagesIn addition to using solid colors as your background, you can also use images. This is similar to using the background attribute of HTML; the background attribute can be set only on the <body> tag, but CSS allows you to set a background image on any element. A background image can be of any type understood by the browser, which means most background images are GIFs or JPEGs (a few browsers also support PNG background images). Background images are more versatile than a solid color; for example, by using an image with a gradient, you can introduce fades and blends into your backgrounds. Photographic images used as backgrounds can often have a striking affect that can't be achieved with a solid RGB color. However, complex backgrounds also have their price: It is much harder to find text colors that will contrast well with a background image. The background-image property is used to set a background image on an element. The browser loads the image and then displays it behind the foreground content as specified by the CSS properties background-repeat, background-position, and background-attachment. TRansparent parts of the background image show the background color of the element (if any) or the background of the containing element. In most cases, a background image tiles, which means that it repeats both horizontally and vertically across the box containing that element. A background image fills only the area inside the border (if any), which means the padding and the content itself, as defined by the box model. Did you Know?
Remember that to set a background image for the entire page, you just need to write a CSS rule for the <body> tag.
A good background image intended to tile both across and down should be created so that it doesn't have visible edges and seems to flow smoothly between one tile and another. If you're going to position text over the graphic, you should also make sure that it's not too busy; you should still be able to read text after that text is placed over the background. For the examples in this hour, I created a very simple background graphica star field. I created a 100 pixel by 100 pixel black square, made a few dots in various colors, and saved it as stars.gif. The background image is shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11fig01 Figure 11.1]. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/11fig01_alt.jpg [View full size image]] File:11fig01.jpg I also created a simple HTML page with some content, so you can see the effects of using this background image behind text; the page contains the first few lines of the U.S. national anthem, the Star Spangled Banner; apologies to my non-American readersit just seemed appropriate given the background graphic! [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11ex01 Listing 11.1] shows this sample HTML page, which will be used for applying styles learned this chapter. You can download the full HTML listing from the book's website. Listing 11.1. The Sample HTML Page
The background-image Property Values for the background-image property are an image address URL, none, or inherit. URLs are indicated by the url() function around the address of the image. Quotes around the URL are optional and can be either single or double quotes (but they have to match); the following rules are all identical: selector { background-image: url(image.gif); }
selector { background-image: url('image.gif'); }
selector { background-image: url("image.gif"); }
The URL is calculated relative to wherever the rule appears, not necessarily to the web page. For example, the page URL might be http://www.css24.com/author/index.php, and it links in an external style sheet located at http://www.css24.com/styles/site.css. A value in that style sheet, such as url("bg.gif"), refers to something in the /styles/ directory, not the /author/ directory, because the url() style rule is located in a file in /styles/. However, if the same rule were part of an embedded style sheet or an inline style attribute on the index.php page, it would reference something in the /author/ directory because it's all relative to the file that contains the rule. When you set the background-image, you should set the foreground colors so that they contrast with the background, just as you do when setting the background-color. You should also designate a background-color that is roughly equal to most of the background-image or at least one that contrasts well with the foreground color. If the background-image can't be loaded, the background-color is displayed instead. If you have a cloudy, sky-blue background-image, set your color property to black (because that contrasts well with the light background) and the background-color to something like #CCCCFF (light blue). For example, here's a rule to set the stars.gif image as the background-image of the page, along with the appropriate colors: body { background-image: url("stars.gif");
background-color: black;
color: white; }
a:link { color: yellow; }
a:visited { color: lime; }
You'll notice I set the a:link and a:visited colors as well; otherwise, my links might not be visible against the dark background if they were left as the browser's default (blue and purple, respectively). You can see these style rules applied to the Star Spangled Banner page in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11fig02 Figure 11.2]. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/11fig02_alt.jpg [View full size image]] File:11fig02.jpg As you can see, the image was tiled across and down the page and looks like it fills up the entire page with a star field. As noted earlier, you can set background images on any element, not just the <body>. This lets you set a background on paragraphs, tags, or any other HTML tags. For example, these rules set the background-image on headline elements:
body { background-color: white;
color: black; }
h1, h2, h3 { background-image: url("stars.gif");
background-color: black;
color: white; }
h1 { padding: 0.5em; }
h2, h3 { padding: 0.25em; }
a:link { color: yellow; }
a:visited { color: lime; }
I've added padding here to make it easier to see the effects of the background behind the text. Apply these rules and you get a different look to the page, as shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11fig03 Figure 11.3]. , . |
|---|
| Value | Effect |
| repeat | Tile horizontally and vertically |
| repeat-x | Tile only horizontally (along the X-axis) |
| repeat-y | Tile only vertically (along the Y-axis) |
| no-repeat | Display the image only once, with no tiling |
| inherit | Inherit the background-repeat value of the containing block |
It's easier to demonstrate these in action rather than explain them in text, so let's look at how you use background-repeat. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11ex02 Listing 11.2] is a style sheet that sets a horizontally repeating background on the <body>, which puts a band of stars across the top of the page.
Listing 11.2. A repeat-x Background Image
/* stars-11.2.css */<br />body { background-color: gray;<br />background-image: url("stars.gif");<br />color: white;<br />background-repeat: repeat-x; }<br /> |
In this example, you'll notice I set the background color to gray; this makes it easier to see where the black image starts and stops. I had to choose a color that would be dark enough to show the white text, but light enough to contrast with the black of the starfield. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11fig05 Figure 11.5] shows this style sheet applied to the HTML page in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11ex01 Listing 11.1].
To tile the figure vertically, you use the background-repeat value of repeat-y, as in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11ex03 Listing 11.3].
Listing 11.3. A repeat-y Background Image
/* stars-11.3.css */<br />body { background-color: gray;<br />background-image: url("stars.gif");<br />color: white;<br />background-repeat: repeat-y; }<br /> |
This creates a stripe down the left side, as shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11fig06 Figure 11.6]. In the next section of this hour, you'll learn how you can use the background-position property to move the stripes created by repeat-x and repeat-y.
If you don't want the image to repeat at all, use the background-repeat value of no-repeat, as in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11ex04 Listing 11.4]. You use this value whenever you want a single placement of an image, such as a watermark or a very large background that shouldn't be repeated. See [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11fig07 Figure 11.7].
Listing 11.4. A Nonrepeating Background Image
/* stars-11.4.css */<br />body { background-color: gray;<br />background-image: url("stars.gif");<br />color: white;<br />background-repeat: no-repeat; }<br /> |
The background-position Property
As you can see in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11fig07 Figure 11.7], a background image is placed in the upper-left corner of the element box it is styling. If tiling occurs, either by default or because of the background-repeat property setting, the image reproduces itself to the left and right horizontally, or up and down verticallyor bothfrom that starting position.
You can change the location of the initial image by using the background-position property. A background-position value consists of two size values or percentages: one indicating the horizontal position and the second indicating the vertical. If only one value is given, it sets the horizontal position.
A size value for background-position is a number and a unit, such as 30px or 4em; this tells where the initial image's upper-left corner is to be placed.
A percentage value indicates how far over the image should be aligned; 50% means that the center of the image (horizontally or vertically) aligns with the center of the element being styled. A pair of values, such as 75% 25%, means the spot on the image that's 75% over from the left horizontally and 25% down from the top should be matched with the corresponding location in the element's box.
In addition to sizes and percentages, word values can be used for background-position; these are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11table02 Table 11.2]. Values can be combined together; right center means 100% 50%, for example. However, if only one word value is given, the second value is assumed to be center. Word values can be listed in either order, so bottom left is the same as left bottom.
| Value | Effect |
| size size | Place the image at the specified location |
| percent% percent% | Place the image proportionally |
| top | Corresponds to 50% 0% |
| left | Corresponds to 0% 50% |
| right | Corresponds to 100% 50% |
| bottom | Corresponds to 50% 100% |
| center | Corresponds to 50% 50% |
| top left | Corresponds to 0% 0% |
| top center | Same as top (50% 0%) |
| top right | Corresponds to 100% 0% |
| left center | Same as left (0% 50%) |
| center center | Same as center (50% 50%) |
| right center | Same as right (100% 50%) |
| bottom left | Corresponds to 0% 100% |
| bottom center | Same as bottom (50% 100%) |
| bottom right | Corresponds to 100% 100% |
The default value of this property is top left, which is the same as 0% 0%. Like background-repeat, this property's value is not inherited from the containing block.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11ex05 Listing 11.5] uses the background-position property to place an image that is set to tile horizontally.
Listing 11.5. A Positioned, Repeating Background Image
/* stars-11.5.css */<br />body { background-color: gray;<br />background-image: url("stars.gif");<br />color: white;<br />background-repeat: repeat-x;<br />background-position: 0% 33%; }<br /> |
As shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11fig08 Figure 11.8], when this style sheet is applied to [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11ex01 Listing 11.1]'s HTML page, the effect is a stripe across the page.
The background-attachment Property
Normally, images scroll with the rest of the page; however, you can change that by using the background-attachment property. This property can take three values: scroll, fixed, or inherit. The default value is scroll, and the property's value is not inherited from the containing block unless the value is explicitly set to inherit.
A background-attachment value of fixed means that the image doesn't move relative to the original position of the page, even if this means it might not be displayed because the element being styled is not on the screen or is not within the region where the background image could be seen (as determined from the background-repeat and background-attachment properties). If the value of background-attachment is fixed, the location of the image is placed relative to the whole page, not to the element being styled.
You can see an example of using a fixed background image in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11ex06 Listing 11.6]. This is a repeating stripe across the top of the page, which won't move even when the page is scrolled up or down.
Listing 11.6. Style Sheet for a Fixed Background
/* stars-11.6.css */<br />body { background-color: gray;<br />background-image: url("stars.gif");<br />color: white;<br />background-repeat: repeat-x;<br />background-position: top left;<br />background-attachment: fixed; }<br /> |
In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11fig09 Figure 11.9], I've scrolled down a little with the scrollbar, but the background image remains at the top of the page where I placed it. You can test this yourself by viewing the page at the book's website; you can also download the HTML page, style sheet, and image, for local viewing.
The background Shorthand Property
Like the font property, background is a shorthand property that enables you to set several properties at once. By using background, you can set the background-color, the background-image, the background-repeat, the background-position, and the background-attachment. Simply list the values you want (in any order) as the value for background; any values you don't set are set to their default values.
The CSS rules used to create [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11fig09 Figure 11.9] can be rewritten like this:
body { color: white;
background: url("stars.gif") repeat-x
fixed top left gray; }
| Try it Yourself: Create a Web Page Watermark
Let's put together everything you've learned in this chapter and create a practical example: A transparent, fixed position watermark for a web page.
|
./ ADD NAME=CH11LEV1SEC3.HTML
Summary
The background of any element can be set with the background-color and background-image properties. When using backgrounds, make sure there is contrast between the colors you're using (including image colors), and also ensure that you've set the foreground colors as well.
The tiling, position, and scrolling of the background image can be set with the background-repeat, background-position, and background-attachment properties. All the background properties can be set at once with the background shorthand property.
./ ADD NAME=CH11LEV1SEC4.HTML
Workshop[wax ka badal]
The workshop contains a Q&A section, quiz questions, and exercises to help reinforce what you've learned in this hour. If you get stuck, the answers to the quiz can be found after the questions.
Q&A
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11qa1q1a1 Q.] | What if I want a graphic to tile across the page horizontally and vertically, forming a "T" or "L" shape instead of filling the whole page? Can that be done? |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11qa1q1 A.] | Yes, but it's kind of tricky. Here's how you do it: Add a tag just inside the <body> of your page; have it contain all the content you'd normally put in <body> and give it an id attribute. Then use the transparent value for background-color, like this:
body { background: gray url("stars.gif") repeat-x;<br />padding: 0px;<br />margin: 0px; }<br />div#mydiv { background: transparent url("stars.gif")<br />center repeat-y;<br />color: white;<br />padding: 0.5em; }<br />This makes a T-shaped star background. The padding and margin adjustments are necessary to remove the default padding and margin the browsers put on <body> and add them back in for the .
|
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11qa1q2a2 Q.] | Why doesn't the order matter for the background shorthand property? That seems confusing. Shouldn't they be in some specific order? |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11qa1q2 A.] | Nope. Because the properties set by the shorthand property all have completely different types of values that can be assigned to them, it's pretty easy for a browser to figure out that, for example, the value green must go with background-color and the value url("stars.gif") with background-image. |
Quiz
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11qa2q1a1 1.] | Which of these values for background-position places the background image at the middle and bottom of the styled element's display box?
#
bottom center
|
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11qa2q2a2 2.] | You have an image named skyblue.jpg; it's a graphic that looks like a blue sky with a few wispy clouds. The color is closest to rgb(75%, 75%, 100%). You want it to tile down the right side of the page, and the background image shouldn't scroll when the page scrolls. The rest of the page will be white; all your text will be black or other colors that contrast against the background. What CSS rule would you write, using the background shorthand property? |
Answers
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11qa2q1 1.] | Trick question! They all do; they're all the same value. |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch11qa2q2 2.] | Because you want the rest of the page to be white, the RGB values of the sky don't matter that much; your black text will contrast nicely with either white or light blue. Therefore, the rule can be written like this:
body { background: url("skyblue.jpg") white<br />right top repeat-y fixed; }<br /> |
Exercises
The best way to understand background colors and images is to get some hands-on practice. Create yourself a test page, an image or two, and a style sheet. Try the following exercises:
- Tile the graphic along each edge of the page.
- Set backgrounds on inline and block elements besides just <body>. Make them scroll or tile!