77CSS and Images float: left; margin-right: 20px; width: 220px; border:1px solid #D2D7E4; } The gradient background on the Ingredients box (shown in Figure 3.9) uses a very similar background image to what I used for the body text’ s background, except that the Ingredients box coloring graduates from light blue to white. I’ve also added a border that’s the same color as the darkest part of the gradient. Figure 3.9. Using a background image to create a gradient behind the Ingredients box Download at WoweBook.Com The CSS Anthology78 Discussion Background images can be applied to any page element, including headings, as Figure 3.10 shows. You can see I’ve used a repeated image to display a dotted border beneath the heading. The image is positioned at the bottom left of the heading, and I’ve given the heading six pixels of bottom padding so that the text avoids appearing as if it’s sitting on top of the background image: chapter03/backgrounds2.html (excerpt) <h1>Chinese-style stuffed peppers</h1> chapter03/backgrounds2.css (excerpt) h1 { background-image: url(dotty.gif); background-repeat: repeat-x; background-position: bottom left; padding: 0 0 6px 0; color: #41667F; font-size: 160%; font-weight: normal; background-color: transparent; } You can even apply backgrounds to links, enabling you the ability to create some interesting effects, as Figure 3.11 shows: chapter03/backgrounds2.css (excerpt) a:link, a:visited { color: #41667F; background-color: transparent; padding-right: 10px; } a:hover { background-image: url(arrow.gif); text-decoration: none; background-position: center right; background-repeat: no-repeat; } Download at WoweBook.Com 79CSS and Images Figure 3.10. Applying a background image to the heading to create an underline Figure 3.11. Applying a background image to the link on hover Download at WoweBook.Com The CSS Anthology80 How do I place text on top of an image? In the bad old pre-CSS days, the only way to overlay text on an image was to add the text via your graphics program! CSS provides far better means to achieve this effect. Solution The easiest way to layer text over of an image is to set the image as a background image. The image that appears beneath the heading on the Ingredients box in Fig- ure 3.12 was added using the following style rule: Figure 3.12. Applying a background image to the Ingredients box heading Download at WoweBook.Com 81 CSS and Images chapter03/backgrounds3.css (excerpt) #smallbox h2 { margin: 0; padding: 0.2em; background-image: url(boxheaderbg.jpg); background-repeat: no-repeat; color: #FFFFFF; background-color: red; font-size: 140%; font-weight: normal; } Discussion Using CSS to place text on top of an image offers many advantages distinct from simply adding text to the image through a graphics program. First, it’s harder to change text that’s part of a graphic; to do so, you need to find the original graphic, re-edit it in a graphics program, and upload it again every time you want to change the text. Second, text is far more accessible if it’ s included on the page as text content rather than as part of an image. Browsers that lack support for images will be able to read text that has been added using CSS, and such text can also be resized by the user. Including image text via CSS can also benefit your search engine rankings; though search engines are unable to index text that’s part of an image, they can see regular text that has been placed on top of an image, and index it accordingly. Check Your Contrast! If you’re going to overlay a background image with light-colored text (as I’ve done in Figure 3.12), be sure also to give the area a dark background color. This way, the text will remain readable against the background if the user has disabled images in the browser , or is browsing on a connection over which the images are slow to load. Download at WoweBook.Com The CSS Anthology82 How do I add more than one background image to my document? Although it’ s detailed in the CSS2 specification, Apple’ s Safari browser is currently the only browser in which it’s possible to apply more than one background image to your document. So, what should you do if you want to add two images to the document—for example, one that repeats, and one that stands alone? Solution It’s possible to give the effect of multiple background images by applying different backgrounds to various nested elements, such as the html and body elements: chapter03/backgrounds4.css (excerpt) html { background-image: url(background-repeatx.jpg); background-repeat: repeat-x; background-color: #D2D7E4; } body { font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif; color: #000000; background-image: url(recipes.gif); background-repeat: no-repeat; background-position: 98% 2%; margin: 0; padding: 46px 0 0 0; } The effects of these styles can be seen in Figure 3.13. Download at WoweBook.Com 83CSS and Images Figure 3.13. Applying background images to the html and body elements Discussion This simple example can form the basis of more complex effects using multiple background images. As you’ve seen through the examples in this chapter, a back- ground image can be applied to any element on the page. The careful and creative use of images in this way can achieve many interesting visual effects while main- taining the accessibility of the document (as the background images causes no inter- ference with the document’s structure). Many of the entries in the CSS Zen Garden site rely on such careful use of back- ground images to achieve their layouts. 2 2 http://www.csszengarden.com/ Download at WoweBook.Com The CSS Anthology84 How can I use transparency in my pages? Achieving real transparency using images is possible with the PNG image format; by saving your images as a 24-bit PNG, you can achieve opacity and true transpar- ency. While GIF images also support transparency, the format requires us to use a matte—a color that’s similar to the background upon which the image will be placed—when we save a transparent GIF image. This technicality means that creating a transparent GIF image that spans differently colored back- grounds is very difficult. It often involves chopping the image in two, saving each part separately, then reassembling the image pieces on the page—a pro- cess that reeks of old-school methods, and one we usually try to avoid in CSS-based layouts. Using the GIF format for an image that will scroll over a fixed background results in an ugly “halo effect.” While the transparency is effective in Figure 3.14, upon scrolling, the undesirable halo effect is appar- ent. Solution The example in Figure 3.15 uses two PNG images. The first replaces the white background of #content with a ten-pixel PNG image. I developed this image in Photoshop by creating a new transparent image, then placing a solid white layer over the top of the transparent background. I then reduced the opacity of this layer to 40% and saved the file as a 24-bit PNG, giving it the name opaque.png. The second image is a replacement for the background image recipes.gif; it’s a 24- bit PNG with a transparent background. I’d like to fix the image in the top right of the viewport (using background-attachment: fixed), so that it remains in that location when the user scrolls the page. If I were to use a GIF image (with a dark blue as the matte), we’d see the halo effect mentioned above when the background moves and the image appears above the lighter page background. Here’s the CSS that creates the effect shown in Figure 3.15: Figure 3.14. The ugly “halo effect” Download at WoweBook.Com 85CSS and Images chapter03/background5.css (excerpt) body { font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif; color: #000000; background-image: url(recipes.png); background-repeat: no-repeat; background-position:98% 2%; background-attachment:fixed; margin: 0; padding: 46px 0 0 0; } #content { margin: 0 4em 2em 4em; background-image: url(opaque.png); padding: 1em 50px 40px 1em; } Figure 3.15. Displaying an opaque background without the halo effect on the Recipes image Discussion PNG images can be used to create unique and attractive effects. Unfortunately Inter- net Explorer 6 lacks the level of support required to render transparent PNGs. Download at WoweBook.Com The CSS Anthology86 However, as long as you think through your layout carefully, it’s often possible to include this kind of effect in your pages for visitors using other modern browsers, such as Firefox, Safari, Opera, and Internet Explorer version 7 and up. Another al- ternative is to use JavaScript to work around this limitation of Internet Explorer 6 and earlier. I’ll outline a method for doing this in Chapter 7. Can I create more complex image borders, such as a double border? If you want to display photographs to best effect then you may want to add more than the simple borders that we explored earlier in this chapter. We can combine background images and borders to create some stunning effects, all using CSS. Once again, this will save you needing to process images in Photoshop to add the border effects. Solution In Figure 3.16 we have a photograph displayed as a feature element on a page, or as part of an album. The simplest double border effect combines adding a background color and some padding to our image; the color of the background becomes the first border and the actual border the second one: chapter03/doubleborder.css (excerpt) img.doubleborder { border: 1px solid #333; padding: 5px; background-color: #EEEEEE; } Download at WoweBook.Com [...]... WoweBook.Com 88 The CSS Anthology Discussion Both of the above effects work by creating padding around the image This creates space between the edge of the image and the border The padding will be the color of the background or show the background image, and we can use this to create at­ tractive double border effects without needing to wrap the image in another element Summary This chapter has explained the answers... this case, the list item) This means that the user is forced to click on the text, rather than the red back­ ground, to select the menu item One way to rectify this issue is to use a CSS hack that expands the width of the link—but only in Internet Explorer version 6 and earlier Here’s the rule that does just that: * html #navigation li a { width: 100%; } Of course, you may decide that leaving the links... like when the cursor is positioned over the first menu item Figure 4.4 The CSS navigation showing a rollover effect Discussion The CSS we’ve used to create this effect is very simple You can create hover states for heavily styled links just as you can for standard links In this example, I simply changed the background color to make it the same as the left-hand border; however, you could alter the background,... Most of the work is done here, creating CSS rules to add left and right borders, re­ moving the underline, and so on The first property declaration in this rule sets the display property to block This causes the link to display as a block element, meaning that the whole area of each navigation “button” is active when you move the cursor over it the same effect you’d see if you used an image for the navigation... as these really are the building blocks with which we create image-rich design in CSS Keeping images in the background enables you to more easily offer alternative style sheets and change the look of your pages, as well as to create interesting effects There will, of course, be image-related questions all through this book In particular, Chapter 9 will explore the positioning of images along with other... images The CSS rollover is created using the :hover pseudo-class selector the same selector you’d use to style a hover state for your links Let’s take the above list navigation example and add the following rule to create a rollover effect: Download at WoweBook.Com Navigation 95 chapter04/listnav2 .css (excerpt) #navigation li a:hover { background-color: #711515; color: #FFFFFF; } Figure 4.4 shows what the. .. and we can hook our CSS styles to the list elements themselves However, we want to avoid our navigation looking like a standard bulleted list as rendered by the browser’s internal style sheet Solution The navigation in Figure 4.1 is marked up as a list and styled using CSS, as you can see here Figure 4.1 Creating navigation by styling a list Here’s the markup required to create the navigation list:... we style the list: chapter04/listnav1 .css (excerpt) #navigation ul { list-style: none; margin: 0; padding: 0; } As Figure 4.3 illustrates, the above rule removes list bullets and the indented margin that browsers apply, by default, when displaying a list Figure 4.3 Viewing the list after indentation and bullets are removed The next step is to style the li elements within navigation, to give them a bottom... interesting effects for the navigation Download at WoweBook.Com 96 The CSS Anthology Hover Here? Hover There! In modern browsers, including Internet Explorer 7, you can apply the :hover pseudo-selector to any element you like, but in Internet Explorer 6 and below, you can apply it only to links Older versions of Internet Explorer allow only the anchor text to be made clickable, because the link fails to.. .CSS and Images 87 Figure 3.16 A simple double border effect using only CSS We can create more complex effects by including a background image The following CSS uses a small background tile repeated behind the photo to create the effect shown in Figure 3.17: chapter03/doubleborder-bg .css (excerpt) img.doubleborder { border: 5px solid #8E787B; . href="#">Recipes</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Buy. (excerpt) <ul> <li><a href="#">Recipes</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Articles</a></li>. (excerpt) <div id="navigation"> <ul> <li><a href="#">Recipes</a></li> <li><a href="#">Contact Us</a></li>