• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 6. Advanced Page Layout > A Digression on Backgrounds

A Digression on Backgrounds

Before you learn to create the effect of full-height columns in your CSS-based layouts, you'll need to understand backgrounds. There's actually quite a lot to know about them, but at this point, I'm going to stick with the key information you need to use CSS (rather than XHTML) to add a background graphic into a div and to make that graphic repeat to fill the entire div. This is the method you'll use to create the illusion of columns for the viewer.

The Two Ways to Add Graphics

From a design point of view, it's interesting to consider whether it's best to add graphics into the background of a div using CSS or directly into the div as content using XHTML markup.

For example, if you are adding a bio of the CEO to a corporate Web site, then the CEO's picture is definitely part of the content and should be added into the markup with an img tag. On the other hand, if the graphic is a texture you want to add behind the page for visual interest, then that is presentational and you shouldn't add it to the markup; instead, add it as a background element using CSS.

As an extension of this thinking, it's good practice to store content graphics and presentational graphics in separate folders. If you decide to redesign the site using the same content, you have the XHTML and content images entirely separate from the CSS and presentational images, so it's easy to ditch the old presentation and keep the content. This organization is also helpful if you ever syndicate content from your site—syndicators just want your content, which they use in the context of their own presentation, and if your site is organized in this way, then it is easy for you to separate its content from its presentational elements.

The bottom line? Add presentational graphics as backgrounds using CSS.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint