Embedding Media - HTML5 with CSS3 - page 175

<aside class="pull">
<q>&hellip; the most astounding super-science gadgetry ever conceived
on this planet, or several others.</q>
</aside>
<p>You can find all the standard costume components and accessories,
both off the rack and custom tailored. Capes, cowls, tights, belts,
boots, and of course masks in every shape and style. But what you'll
also find at Power Outfitters is some of the most astounding
super-science gadgetry ever conceived on this planet, or several others.
I was lucky enough to receive a tour of the manufacturing wing to see
what goes into making some of their top selling items.</p>
With a quick float:right and a few more declarations, this pull quote can easily look something like
Figure 5-18.
Figure 5-18. A floating pull quote with some additional style
Background Images
With the CSS background-image property, you can add decorative imagery to your page and still avoid
mixing presentation with your content—images that are meaningful content belong in the HTML document
with your other content. Almost any element in HTML can carry a background image and the contents of
the element will overlay that background. The background image tiles in both directions by default,
beginning at the top-left corner of the element and replicating itself horizontally and vertically to fill the
space, like the tiles on a kitchen floor.
Listing 5-13 shows a CSS rule that will apply a background image to the body element. The image is
specified by its URL, contained in parentheses and denoted by the url keyword.