Proffesional CSS

Note the use of repeat-y (repeat vertically) for both graphics, even though in normal circumstances, neither will actually visibly repeat. I do this because if either the header or footer becomes taller than its background graphic (which shouldn’t happen but might if someone inadvertently adds too much text, or if the user sizes up the layout to a really large size from the View menu), then there won’t be a gap below the background graphic—instead, it will repeat vertically.

Also, in case the graphic doesn’t load at all, I’ve added a gray background color. A background graphic is always displayed on top of a background color, so the color doesn’t normally show if the graphic fi lls the background, as it does here. While always stating a background color along with any background image is good practice, it is especially important in this case, as the light-colored text I will have to use over these dark background graphics will barely show on the default white background color of the page if the background graphic doesn’t load for some reason.