HTML and CSS Reference
In-Depth Information
Background images are the most powerful tools in the web designer's
toolbox because they can be used in so many different ways. There is no
officially sanctioned correct way to use backgrounds, but with experi-
ence, you'll notice a few patterns that emerge and common elements to
which you can hook backgrounds.
Backgrounds Bigger Than an Element
If you remember the days of using HTML tables for page layouts, you
certainly have sliced up your fair share of images into pieces that fit a
specific cell only to reassemble them later.
There is very little reason to slice an image for use in CSS. If it appears as
a cohesive graphical element in the source Photoshop document, then it
can most likely remain so in the HTML build if you find the right element
to which to attach it. A typical HTML document structure has a body,
a wrapper for the header, center columns or footer, various sections or
articles, and then finally the text. Find the element in that hierarchy that
is best suited to which to attach the background image.
Stretching the size of an element with excess padding just to make space
for an image is common practice when working with columns or link
icons. Overlapping elements with negative margins (Chapter 5) can be a
great way to get that background image attached to the header element
to bleed into the content of the page.
Custom Bullets and Iconography
Applying a custom bullet to list items can be done via the
list-style-image
property (Chapter 10), but positioning is not
as flexible as with
background-image
. By turning off list bullets
