And while
some of you might be saying, ???Well, create flexible-width designs, then!??? some designs
aren??™t suited to that, and text-heavy sites tend to work better with fairly narrow text
columns, since most users find it hard to read very wide blocks of text.
All of this brings us to the final example in this chapter, which shows how to create watermarks
for a web page. In the following screenshot, the wrapper div is to the left, with a
background image to the right of this area.
To achieve this effect, the margin property/value pair in the #wrapper rule has been
removed, and the following rule has been added:
body {
background: #878787 url(background-watermark-large.gif) no-repeat
?? 536px 0;
}
As mentioned earlier in the chapter, this assumes you??™re adding a second body rule.
You can, however, just add the background property/value pair to the existing body
rule in the style sheet.
WEB PAGE ESSENTIALS
55
2
The image used is a transparent GIF, so the background color setting was made a mediumgray
(#878787). The reasoning behind using a transparent GIF is explained in Chapter 4,
but it relates to web browsers sometimes interpreting colors differently from graphics
packages. Therefore, it??™s often easier to make the flat background color of a graphic transparent
and then use the web page background color in place of it.
The repeat setting is set to no-repeat, because we don??™t want the image to tile. Finally,
the background??™s position is set to 536px 0.
Pages:
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120