Double Border BackGround

CSS triple border background image frame of Female Madrigal Clown

Learn to create Double Border Background pages without the need for tables! Use the CSS border property together with the background image property, to style easy to build, beautiful pages that will add a touch of "CSS class" to graphic collections, poetry collections, personal webpages and more.

A double border background CSS tutorial

This so easy! Adding styled backgrounds and borders without all the hassle of table layouts is extremely simple. All it takes is one main div for your content and a little cascading style sheet magic!

The Double Border Background CSS Template makes it very easy to add your own special background images, adjust the margins, padding and borders, and style your text. Also included is the code for MSIE CSS custom colored scrollbars. Users of the Opera 7 browser can now enable custom colored scrollbars as well. All it takes is a simple addition to the Opera6.ini file. [ Opera custom scrollbar colors ]

The code template also includes the XHTML 1.0 Transitional doctype which allows for use of older HTML coding methods while providing a means for validation. To copy the use the code template, just place your cursor anywhere within the text area below. All the code is automatically select, simply key "ctrl + c" or "right-click, copy". Paste the Double Border Background CSS Template to your favorite HTML editor, change the backgound image code to reference your own favorite background tiles or image and there you are!

Double Border Background Template copy & paste code

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Double Border BackGround CSS Template</title>
  <style type="text/css">
  /*<![CDATA[*/
  body {
  margin: 0;
  padding: 0 65px;
  background: #fff url(your-favorite-background-tile.jpg);
  color: #606;
  font: 1em Georgia, palatino, serif;
  font-weight: bold;
  text-align: center;
  scrollbar-face-color:#000;
  scrollbar-arrow-color:#fcf;
  scrollbar-track-color:#000;
  scrollbar-shadow-color:#90c;
  scrollbar-highlight-color:#90c;
  scrollbar-3dlight-color:#90c;
  scrollbar-darkshadow-Color:#90c;
}

#content {
  padding: 15px;
  border: 10px solid #ffc0cb;
  background: url(content-background-tile.jpg);
  }

h1, h2, h3 {
  font-weight: bold;
  text-align: center;
  }
  h1 {
  font-size: 200%;
  color: #639;
  }
  h2 {
  font-size: 150%;
  color:#903;
  }
  h3 {
  font-size: 120%;
  color: #306;
  }

p.j {text-align: justify;}
  p.c {text-align: center;}

img.l {
  float: left;
  }
  img.r {
  float: right;
  }

a:link, a:visited,
  a:active, a:hover {
  text-decoration: underline;
  }

a:link, a:visited {
  color: #8b0000;
  }
  a:active, a:hover {
  color: #666;
  }
  /*]]>*/
  </style>
</head>

<body>
    <div id="content">
      <h1>Double Border BackGround Template</h1>
      <p>Place your content between the two #content div tags.
      This paragraph renders the default style {text-align:left;}</p>
      <p class="c">This text paragraph is styled using class
       p.c {text-align:center;}</p>
    </div>
</body>
</html>

What makes it all so simple is that all of your own additional page elements are placed in the content div <div id="content"></div> —images will automatically be centered due to the CSS text-align: center declaration in the body style. The "align" attribute has been deprecated and should no longer be used in your page code. Use CSS Float in its place, besides being easier, it allows more control options. If you wish to do is float images left, or right, simply add either of the supplied classes to chosen image as in this example: <img class="l" src="float-left.jpg" />.

Whether you are a beginning user of Cascading Style Sheets, or an advanced coder, you will find this double border background template easy to use.

The CSS Triple Border Background Tutorial

The technique is far simpler than might be imagined. So simple in fact, you might soon forget you ever used tables to achieve a similar effect! All it takes is one nested div and a little bit of CSS style! Learn how in the CSS Triple Border Background Tutorial.

Want more CSS background image techniques? Learn to create beautiful CSS background image picture frames. This incredibly simple technique will win you over with stunning results! Without a doubt, this will be one hot new CSS technique! Once again Papabaer delivers: The CSS Border Image Frame Technique. Do you need textures for your backgrounds? It's easy with Paint Shop Pro - Textured Background Tutorial.

Helpful references: HTML Named Colors | HTML Named Colors Gray Shades | Character Entity HTML Reference ]

[ Return to Top of Page | Access Key list | BIG BAER ]

Valid XHTML 1.1 Valid CSS 2.1 WAI-AAA