Using Bordered Backgrounds

Are you are using a bordered background image as the background for your website design? Have you have checked to see HOW the page displays on todays large screen monitors? If not, you may be in for a surprise.

Background Image Property

The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. The background image for a page can be set by using the following css style rule:

body{ background-image: url ('decorative-tan.jpg'); }

Background Image - Repeat Horizontally or Vertically

By default, the background-image property repeats an image both horizontally and vertically. Some images should be repeated only horizontally or vertically, or they will look strange as you can see in Example #1.

If the image is repeated only vertically (repeat-y), the background will look better, as you can see in Example #2. The style rule will look like this:

body{ background-image: url('decorative-tan.jpg'); background-repeat: repeat-y; }

NOTE: In the case of a bordered image, you will also need to set either a left margin OR a container for your content so that it does not overlap the border and become unreadable as seen in Example #2.

The style rule will look like this:

body{ background-image: url('decorative-tan.jpg'); background-repeat: repeat-y; margin-left: 150px; }

An example of a bordered background image that is repeated horizontally, may be found on this Mini Country Template

Background Color Property

The background-color property specifies the background color of an element. The background color of a page is defined in the body selector:

body{ background-color: #F0EDDA; }

NOTE: When a background image is defined, a similar background color should also be defined for those not loading images.  If the border background image you have chosen, does NOT cover the entire width of the page, the corresponding color will be displayed to fill up the area not covered. Example #3.

The style rules will look like this:

body{ background-image: url('decorative-tan.jpg'); background-repeat: repeat-y; margin-left: 150px; background-color: #F0EDDA; }

Background - Shorthand property

Rather than list each of the rules on a separate line, you can shorten the code by specifying all the properties in one single property. This is called a shorthand property. The shorthand property for background is simply "background" and will look like this:

body {background:#F0EDDA url('decorative-tan.jpg') repeat-y;}

Example of Bordered Background Images

Example #1: Background image is 1024 x 336 px. Image has no rules as to repeat so it will repeat both vertically and horizontally across the page. As long as your browser is set at 1024px or below for the width, the page looks OK with the exception of the left hand margin which has not been accounted for. Filler text has been used to show you how the content would look. For those of you who do not have a wide monitor, you can view this screenshot.

Example #2: I have used the same background image as above BUT set the image to repeat vertically on the page. A left hand margin has also been set. On a wide resolution monitor, you will see the image repeats only once and the content is pushed over away from the border image. HOWEVER, no background color was set so you will see a large white area to the right of the image. For those of you who do not have a wide monitor, you can view this screenshot.

Example #3: This page uses the same background image as the examples above AND the background color has been declared. The left margin has been set.

Will declaring the repeat of the border background and the color solve all of your display problems? No, especially if the image uses a border on a textured background.

Example #4: As you can see in this example, the background to the right of the border is textured and there is no way to match the textured part of the background. For those of you who do not have a wide monitor, you can view this screenshot.

A simple solution is to either choose a border background that uses a solid color OR use only the border area of the image as seen in this example.

You can leave the style rules in the head section of your page OR better yet, move the style rules to an external style sheet and link to to any page you want to have this look. You can view the source code of each page for the style rules for that page. At the same time, you can declare a default font-family for the body and get ride of all of those font tags you might have on your page.

Summary:

• If you are going to use a background that has a border make sure you declare the repeat as horizontal or vertical as well as a background color.
• Make sure you declare a left margin wide enough so the content does not overlap the border or butt up against it.
• Remember that a textured background or a very dark background color can be difficult to read. Choose your colors accordingly OR add a container for the content of the page with a lighter colored background.

Additional Resources

• W3schools CSS Background Property
• SitePoint background-image property
• Background and Color Properties

Copyright © 2010 Pat Geary of Genealogy Web Creations, All Rights Reserved
Written November 2010