HTML and CSS Reference
In-Depth Information
Figure 4-32
Setting the margin around the paragraph
sets the paragraph margin
to 20 pixels below, 15 pixels
to the left, and 40% of the
width of the president's
message to the right
In this case, the margins are a mixture of absolute and relative lengths. The top,
bottom, and left margins are set to 0 pixels, 20 pixels, and 15 pixels, respectively.
The size of the right margin will depend on the size of the president's box, which
in turn will vary depending on the width of the Web page.
◗
2.
Add the following properties to the
#president
selector style rule to define the
source, position, tiling, and size of the background image (see Figure 4-33):
Make sure you start
every browser extension
style with the - (hyphen)
character.
background-image: url(atwood.png);
background-position: bottom right;
background-repeat: no-repeat;
-o-background-size: 40%;
-moz-background-size: 40%;
-webkit-background-size: 40%;
background-size: 40%;
Figure 4-33
Setting the padding of the navigation list items
displays the atwood.png file as
the background image in the
bottom-right corner of
f the
president's message
progressive
enhancement using
browser extensions
sets the width of the
background
image to 40% of the width of the
president's message
Notice that the style rule uses progressive enhancement and vendor prefixes in
order to provide support for the widest range of browsers and browser versions.
◗
3.
Save your changes to the file and then reload
cycle.htm
in your Web browser.
Figure 4-34 shows the revised appearance of the president's message box.
