Embedding Media
In this instance, the second rule would set the background-position to the bottom left, but that doesn’t
matter because it also completely wipes out the values for background-image, background-color, and
background-repeat. You’d end up with a box with no visible background at all. To override just a single
background property on an element without affecting any others, declare that property alone in the
“longhand” form:
.intro {
background: #e6f2f9 url(images/background.png) 94% 20px no-repeat;
}
.intro {
background-position: left bottom;
}
Summary
The Web is textual at heart, but it lives a multimedia lifestyle. Images, animation, sound, and video can
imbue a humble web page with an energy and vitality that text alone could never achieve. Images have
been native to the Web from the beginning, but more complex multimedia has always required some extra
help. HTML5 brings us the audio, video, and canvas elements, taking a great leap forward to making rich
media as web-native as images have been for years. In this chapter, we briefly introduced these powerful
new elements, and showed you how to use them with responsibility, offering accessible fallback content
for users and devices that may not be able to enjoy the original media.
Even with these new media elements, HTML still can’t do everything, and plug-ins can still add a lot of
value when they’re used appropriately. This chapter showed you how to embed external plug-in content
into your web pages for the jobs a browser can’t handle on its own.
Imagery can be instrumental in a well-designed web page and is just one more way to make your site
unique and identifiable. But images can also convey meaning in ways words can’t. You can embed
meaningful images into your content with the img element, always including an alternative text equivalent
to improve accessibility for people and devices that can’t see the picture. You should separate
presentational images from your content by using CSS and the background-image property. CSS also
gives you the power to control the placement and repetition of background images, and the ability to
influence the placement of inline images (and other elements) to integrate them into the flow of your page.
You’ll make frequent use of the elements and techniques we’ve covered in this chapter and the previous
one to give your content meaning, to make your pages visually attractive, and to bring them to life. But the
Web wouldn’t be the Web without one essential component: the hyperlink. Chapter 6 will introduce you to
hyperlinks and show you how to transform your documents into living, working parts of the World Wide
Web.
