Working With Left Border Background Images

If you decide you wish to use a background image that contains a left border graphic image on your site, remember one thing - not all left bordered backgrounds are created equal.

Selecting the background image

Use care when you select the image you would like to use for your page or site. I found each of the images shown below, in collections of left border background images. Which ones are likely NOT to work well as a page background image and why? You can click on the image for a full size page with information on each of the images and how to use them

Actual Image Size: 175px by 1100px

Actual Image Size: 161px by 1173px

Actual Image Size: 100px by 800px

Many folks who use a background image insert it as the page background but neglect to indicate how the image should repeat. The default is to repeat both horizontally and vertically. The only problem with that is with today's large screen monitors, you are going to end up with a page that has  the repeating background across the content area.

View Screenshot

Using the background Image

If you are going to use a left border background image on your page, the style rule would be part of your body style rule and would look like:

body {
font-size: .95em;
color: #000;
background: #F7F5D5 url('images/17bg.jpg') repeat-y;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
margin: 0px 0px 0px 175px;
padding: 0px;
}

The style rule for the background is written using css shorthand.

The margin style rule tells the browser that the margins will be 0px for the top, right, and bottom margins and the left margin will be 175px. Make sure you specify a wide enough left margin so the content will NOT overlap the left graphic image border.

Your choices for repeating the image are:

You should also specify the style rules for the container which will hold the actual content for your page. I tend to use outerWrapper for that div name and the style would look something like this:

#outerWrapper {
width: 95%;
text-align: left;
margin: 0 auto 0 auto;
padding: 20px;
}

This tells the browser to make the div container fill 95% of the available space, and center the div container on the page. Also to adding a 20 px padding to the container.

The background style rule can use css shorthand. The style rules for the background would be written as follows:

Summary

In selecting your image remember:

1. Images on a textured background are going to be impossible to bland seamlessly with the background color.
2. Light backgrounds will work better for text visibility.
3. Dark backgrounds with light text are more difficult to read.
4. Most graphic image backgrounds require a link back to the site where you downloaded the image.

Once you decide on an image and add it to the style rules, remember to do the following:

• Specify a vertical repeat for the image.
• Specify a background color that is the same as the overall background color of the image.
• Specify a left margin in your body style rules so the content of your page does not overlap the image.

Example of Actual Page with real content - repeat value NOT specified

Example of Actual Page with real content - image repeated vertically on page

If you are looking for some left bordered background images to try out visit BoogieJack.com

Copyright © 2011 Pat Geary of Expression Web Tutorials & Templates All Rights Reserved
Written April 2011