Home :: Forums :: Downloads :: Shop
  1. Home
  2. Knowledge Base
  3. CSS
  4. Triple Background with CSS

Knowledge Base Navigation

  Main :: Add Article :: New :: Popular :: Top Rated
Articles: 51 Categories: 8

KB Article: Triple Background with CSS

Article:Triple Background with CSS     Popular
Submitted By:Taut
Date Added:03-19-2006 10:41:03
Hits:9,730


How to have triple backgrounds using CSS

While there are CSS tags that could be added for links, font types and colors, and any other element of your page, this tutorial will only focus on the triple border background code.

The first step is to put this code between the and tags of your page:

<style type="text/css">
<!--
body {
   background-image: url( tile1.gif );
   background-color: #d8b095;
   margin: 30px;
   padding: 0;
   }
.bordertile {
   background-image: url( tile2.gif );
   margin: 20px;
   padding: 15px;
   width: 600px;
   border-width: 1px;
   border-color: #d8b095;
   border-style: solid;
   }
.toptile {
   background-image: url( tile3.gif );
   margin: 0;
   padding: 6px;
   border-width: 3px;
   border-color: #7c6758;
   border-style: double;
   text-align: left;
   }
-->
</style>




Now you will need to adjust the margins, paddings, borders and image url's in the above code to your needs


To apply these style rules to the section of your page and create the triple border, wrap your content in this code:


<div class="bordertile">
<div class="toptile">
YOUR CONTENT HERE
</div>
</div>

Current rating: 7.97 by 91 users
Please take one second and rate this article...

Not a Chance 12345678910 Absolutely

Please register or sign-in to post comments.


Jump to a selected article...

  
∧