CSS Triple Border Background Tutorial
Learn to create Triple Border Background pages without the need for tables! Use CSS to style beautiful pages for poetry, graphic collections, and many other stylish presentations.
A CSS Backgrounds Tutorial
YES! It can be done. In fact, it is far easier than the traditional approach to multiple background styles using nested HTML tables.
Until now, an HTML triple border background required tables within tables within tables, or variations of convoluted HTML table madness, all to acheive a layout similar to this one created using pure CSS.
It is very easy to get lost in the shuffle and making of the tables, nesting them properly and managing
content. Not so with the CSS background image method. All of the background styles are set using only three CSS
declaration blocks. You can place your styles in the
<head> section of your HTML
document, or reference them using an external stylesheet. No more looking through TONS of code to find where to
put what. It's simple, clean, and easy to locate whatever you want, whenever you wish. You can easily change
colors and backgrounds, fonts, and more.
CSS background styles - one body, two divs…
1 Begin by scripting your main background style, which will then be applied to the
<body></body>
element. You can place your code style in the head section of your HTML document, or create an external
.css
file. The CSS code block for the body element, is a simple
grouping of style declarations that contain the basic presentational information for the page.
body {
margin: 0;
padding: 50px;
background: #fff url(assets/seamless.jpg);
color: #960;
font: 1em Georgia, palatino, serif;
font-weight: bold;
text-align: center;
}
The margin is assigned a value of zero, and a padding value of fifty pixels (50px) is declared. This provides the space, or area, between the outer edge of the page, or margin, and the border of the first background div. The CSS background image assigned to the body element is visible in this space. The remaining styles provide formatting for the body text.
2 The second CSS background assignmemt is declared for the first HTML element
appearing after the body tag:
<div
id="bk-div1"></div> - as you can see, only border and background styles are needed here. The
background image display area is controlled in the style block for the actual content div.
#bk-div1 {
border: 5px solid #000;
background: url(assets/brown-glass-block.jpg);
}
3 The third and final component of the CSS Triple Border Background style code is
given to the actual content container: <div
id="content"></div> - The background image display area for the main div, #bk-div1, is controlled
by the margin value assigned to the content div, here. In this case, a margin value of sixty-five pixels (65px)
is declared. The padding value controls the spacing between the elements contained within the content div and the
inside border of the container. The third background, along with all the actual content elements, reside
here.
#content {
margin: 65px;
padding: 15px;
border: 5px solid #a0522d;
background: url(assets/canvas-linen.jpg);
}
The css triple border background technique is extremely simple and far easier to manage than similar appearing, though much more complex, table layouts. Broken down to its core elements, the HTML for the triple border background page looks like this:
<body>
<div id="bk-div1">
<div id="content">
/* content here */
</div>
</div>
</body>
Three simple little elements provide the backdrop for all three backgrounds! It's easy, it's fast and it is versatile. Whether you use style code placed in the head content, for page specific presentations, or you use external style sheets to control multiple pages or an entire site, the triple border background technique is fun to use and a powerful tool for creating simple, but elegantly styled presentations. - original concept, graphics and design by Bette Baer, CSS & XHTML coding by "Papabaer" 2003/04/12
[ Triple Border Background CSS Tutorial | CSS Border Image Frame Styles | Simple Animated Snow Tutorial | PSP Textured Background Tutorial ]
[ Return to Top of Page | Access Key list | BIG BAER ]