CSS Border Top, Left, and Right Border Backgrounds

CSS Border Backgrounds

With CSS you can make any standard background tile into a left border, top border, or right border style background. So that you know what I'm referring to, view the samples below before continuing with this tutorial.

The links below will open in a new window, just close it to return here when you're finished viewing the sample pages. The last time I checked, the right-border sample only worked in Internet Explorer.

Left Border Sample | Top Border Sample | Right Border Sample

It's true, with the CSS code below, any small tile can be turned into a left, top, or right side border background without the need to make a new image. This opens up a whole new world of possiblities for you, as there are hundreds of standard tiles on my sites and elsewhere that you can easily turn into a border background background with this snippet of code placed in the HEAD section of your HTML document:

<style type="text/css">
body {background-image: url(images/DG033.jpg); 
          background-repeat: repeat-y;}
</style>

That would make a left border background from a single (non-border) tile. The only part you need to change is the part in parenthesis, shown in gray text. Change that to the image path, image name, and image extension of the image you want to tile for your border.

You may also want to change the repeat scheme. By changing the repeat scheme you can change where, and if, the background repeats. To change the repeat scheme, change the third line of above code to the one shown in bold text:

background-repeat: repeat;
Adding this value makes your background image tile like it does with the regular body background tag you're probably familiar with using. Since you can tile a background image by removing the third line of the code above, it's usually better to leave it out if that's the look you want.

background-repeat: no-repeat;
This will make the image appear once in the upper left hand corner. For a left border image it will appear across the whole page at the top for as wide as the image is.

background-repeat: repeat-y;
Using this scheme makes your background image tile vertically on the left side. Use this to make a left border background from a standard tile.

background-repeat: repeat-x;
Adding this tag makes your background image tile across the top of the page. Use this to make a top border background from a standard tile.

Right Border Background

The right border background works a little differently, as you may have noticed if you viewed the sample pages. The last time I checked, it only worked in IE, but it has been a while since I checked. Here's the basic code for a right border background:

<style type="text/css">
body {background-image: url(right_tile.jpg); 
      background-repeat: repeat-y;
      background-position: 100% 0%;} 
</style>

NOTE: Using border backgrounds may mean you need to create page margins to keep the content off the border. Please refer to the code given on the sample pages if you don't know how to create the margins. The code on the sample pages includes margins and background colors.

In case you're wondering why a person wouldn't just make the tile they wanted to use into a right-border or top-border background, the answer is because it won't work. On a right-border background, it will only look right to people that have their resolution set the same as you and have their browser window opened to the same size that you do. For everyone else the right border will either not show up at all, or will repeat somewhere from the middle of the page over. On a top-border background image, if the page is too long the top border area repeats itself part way down the page.

That's the background info on backgrounds. Hope you enjoyed it, GleegleSquirfer.

By the way...

If you want great web page backgrounds, my members-only site features hundreds of professional background images to choose from, and no link back is required for their use if you're a member. You might want to explore the benefits of membership. There's also a multitude of free background images at my BoogieJack.com web site and my i-Backgrounds.com web site, although a link back is required to use images from those resources. Another good option is to make your own unique background images and matching buttons using my highly popular, easy-to-use Background Magic Windows software.

Web Design

Site Information

More Boogie Jack Sites

CSS Border Backgrounds