HTML and CSS Reference
In-Depth Information
FIGURE 6.14
Using
background-size
to scale the icons proportionately to
the size of the menu buttons.
Then you'll give the anchors a
background-size
:
ul a {
.
background-size: 10% 50%;
}
The effect is shown in
Figure 6.14
.
So,
min-width
ensures that the menu doesn't get too small and break at nar-
rower browser widths.
background-size
not only forces all images to adopt the
same size, but also fixes that size to be a percentage of the button size, so they will
adjust as the buttons become smaller. This may or may not be the behavior you
want; it is useful to know it is available to you.
MULTIPLE BACKGROUND IMAGES FOR MODIFIED ICONS
Sometimes you'll use a base icon and then add extra icons to it to modify the icon's
meaning somewhat. For example, you could add a plus sign to a document icon
to create a “New document” icon or add a down arrow to an application icon to
mean “Download update.” You could do this by creating each of these separate
icons statically, but that would be boring when you have CSS3 at your disposal!
Instead, let's include the base icon and the modifiers using multiple background
images, and then size and place them programmatically.
