Craig Grannell
"The Essential Guide to CSS and HTML Web Design"
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.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
56
Closing your document
Back at the start of this chapter, we examined basic HTML and XHTML documents.
Regardless of the technology used, the end of the document should look like this: