Cool Uses for Mini Tiles Using CSS

Here is an example of using a mini tile as a top border using CSS (Cascading Style Sheets). The CSS code is written in an external file referenced to by a snippet placed in the <head> section of the page before the </head> tag. The reason for using an external file rather than placing the code inline is that you just have to do it once. Any changes you make to the page's style can be done just by changing the one external file instead of all of the pages one by one. Saves you a lot of time in the long run.

1) The reference snippet you place on each page is written as :

<link rel=StyleSheet href="bordstyle.css" type="text/css">

2) The external CSS file (bordstyle.css) is simply code written and saved using Notepad or another text editor and uploaded with the page. The CSS code in this example is written as:

BODY {background: #FFFFFF; background-image: url(gnarly_s.jpg); background-repeat: repeat-x;}

The variables in red should be changed to your color and your graphic, respectively.

If you want the tile to repeat down the left side, then change repeat-x to repeat-y in the above code. Here's an example of how that works using the same tile.

~~~~~

If, on the other hand, you'd prefer to put the CSS inline on each page, here's how to do it.

Before the </head> tag, place the following snippet, being careful to keep the second line on one line without hard breaks (<br> or <p> tags):

<STYLE TYPE="text/css">

BODY {background: #FFFFFF; background-image: url(gnarly_s.jpg); background-repeat: repeat-x;}

</STYLE>

Replace the variables in red with your own color and graphic, respectively.

Other than your page's text and link colors, this code will replace your body tag's attributes.

Please close this window to return to the Mini Tiles page.

Much thanks to HTMLGoodies for the CSS tips.

Graphics and Site Design Copyright 2000-2006 Arride Graphics. All rights reserved.
All other copyrights belong to the respective owners as noted.
No part of this site may be copied, downloaded, modified, or distributed in any form whatsoever except as defined under the Terms of Use.
My site's graphics are not part of the linkware offered. All graphics are digitally watermarked and, except as noted, made or modified with
Paint Shop Pro from Jasc and Adobe PhotoDeluxe from Adobe Systems Inc. Click here for an expanded notice. JavaScript Error Blocker from The JavaScript Source