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
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.
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:
background: #F7F5D5 url('images/17bg.jpg') repeat-y;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
margin: 0px 0px 0px 175px;
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:
|repeat||The background image will be repeated both vertically and horizontally. This is default|
|repeat-x||The background image will be repeated only horizontally|
|repeat-y||The background image will be repeated only vertically|
|no-repeat||The background-image will not be repeated|
|inherit||Specifies that the setting of the background-repeat property should be inherited from the parent element|
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:
margin: 0 auto 0 auto;
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:
In selecting your image remember:
- Images on a textured background are going to be impossible to bland seamlessly with the background color.
- Light backgrounds will work better for text visibility.
- Dark backgrounds with light text are more difficult to read.
- 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