How to Build Double Background 2.0 Layouts

Create continuous web site borders fast

Web 2.0 sites allow users to interact with content and with other users as opposed to older generation web pages that are limited to passive viewing. No matter what language is used to build Web 2.0 sites, Cascading Style Sheets (CSS) can be used to separate the presentation (graphical) layer from a site's underlying code. Using CSS, you can create a double background (equal on the right and left sides of the page) that repeats down the full length of a web page while minimizing load time. The goal is to have a double background render perfectly across platforms and browsers.

Things You'll Need

• Computer
• Internet connection
• Basic knowledge of HTML
• Basic understanding of CSS

Instructions

1. Code the repeating graphic into the site's body element using HTML to ensure it remains in the back and extends the full length of the page. The five lines of code looks like this:
   01. body {
   02. background:#fff url(background.jpg) repeat-y top center;
   03. margin:0px;
   04. padding:0px;
   05. }

2. Code six more lines defining a second division that contains the rest of the site. Define the #background div height equal to the height of the image. Sample code using #background as the id is:
   06. #background {
   07. background:url(background-top.jpg) no-repeat top center;
   08. height:395px;
   09. width:100%;
   10. display:table;
   11. }

3. Test the code across browsers to make sure scrollbars are not inserted between repetitions.

4. For your graphic, point to either a local image or a web image using the URL as illustrated in steps one and two. What makes this work is is the 100 percent width and the display:table property. Because the div displays like a table, its height will scale up to whatever content is inside it.

Tips & Warnings

• On Internet Explorer, this code will work on v6 or higher.

References

• Build Double Background in CSS
• CSS Double Background Effect