Watermarks

Although it’s common for sites to be centered in the browser window, many designers
choose left-aligned sites that cling to the left edge of the browser window. Both design
styles are perfectly valid, but in an era of rapidly increasing monitor resolutions, you can
end up with a lot of dead space to the side of a fixed-width left-aligned design. 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;
}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. The 0 setting means it hugs the top of the
browser window, while the 536px setting means the image is placed at 536 pixels from the
left. This is because the content area was earlier defined as 500 pixels wide with 18 pixels
of padding, and 18 + 500 + 18 = 536.
As mentioned earlier, backgrounds can be added to any web page element. For instance,
you can add a watermark to the wrapper div by using the following CSS:
#wrapper {
padding: 18px;
background: #ffffff url(background-watermark.gif) no-repeat 20px
å 20px;
width: 500px;
}
This adds the background-watermark.gif image to the background of the content div,
and positions it 20 pixels from the top and 20 pixels from the left. Again, no-repeat is
used to stop the image from tiling.

 

In either case for the watermark backgrounds, the images scroll with the page content.
However, watermarks can also work well as fixed backgrounds—this can be achieved by
adding the fixed value to the background property in the body and #wrapper rules.