Working with Border Backgrounds

Issues and Tips by SirMark Knight

Using background images to create borders for pages, whether for a left, right, top, or dual (left and right) border, present some challenges for HTML page programming. This page deals only with issues and tips concerning HTML programmed pages.

A detailed discussion of HTML programming is beyond the scope of this tips page. If you have specific questions, you can always email me.

Viewing:

Viewing problems presented by using border backgrounds lies in the way an HTML programmed page is viewed on the user's screen. A user's screen view may be set in a wide variety of different view widths (set in pixels): for example 640 pixels wide, 960 pixels wide, 1020 pixels wide. It is important to remember that the screen's actual width will be somewhat smaller because of the vertical scroll bar which appears on the right hand side (assuming the page from top to bottom is bigger than the screen's actual top to bottom viewing area). For example, normally the vertical scroll bar on the right is set for a default width of 15 pixels, so for a screen set for a 640 pixel width then the screen view will actually be 625 pixels wide.

If a page is created for a 640 pixel width viewing, and a user's screen is set at a higher width view such as 960 or 1020, then the page will appear narrow on that user's screen. If a page is created for a wider view, and the user's screen is set for a lower pixel width, this will create a dual scroll bar situation (both vertical and horizontal scroll bars) and the entire viewing area will not appear in the user's screen. Many people, and I am in this group, do not like the dual scroll bar situation. I also enjoy the 640 width viewing for a screen and that is the width to which my screen is set.

My pages are created for a 640 pixel width with a normal vertical scroll bar of 15 pixels on the right. Many of the border backgrounds I have created and use in this site are in the 625 to 640 pixel width so that a page using the background appears correctly left to right when viewed on a 640 width pixel screen setting with a normal 15 pixel width vertical scroll bar.

If a border image is 640 pixels wide or less and the page is laid out for a wider viewing width than 625 pixel viewing width (taking into account the 15 pixel width of the vertical scroll bar), then this will create a repeating border image as the user scrolls horizontally across the page.

Left click to see an example of the horizontal problems this can create.


Using a top border image has similar problems, only reversed; that is to say, if the image height is small (for example, height is 300 pixels), and the actual page is longer top to bottom than that height, you will get a repeating border running across the page as you scroll down the page.

Left click to see an example of the vertical problems this can create.


Important to note, though, is depending on how you want to layout your page, using a repeating border image may actually work to your advantage (especially if you use an image map to locate things on your page), by allowing you to create different sections across the page without using "frames", a programming techinque which I do not particular like nor enjoy when viewing pages. Note: neither of the two following examples use an image map.

Left click to see an horizontal example.

Left click to see a vertical example.


There are two primary ways to prevent a repeating border background image problem. First, use a border background that is very large in width (horizontal repeating problem) or height (vertical repeating problem) e.g., 1080 pixel width or height. Some of the backgrounds available for downloading at this site are of this type (varying in widths and heights up to 2300 pixels). Note, however, that depending on the complexity of the backgound, the image file size might become very very large and slow downloading. If this happens, I suggest using an image reduction or compression program to reduce the file size. Second, you can create your page so that the page's width or height does not exceed the width or height of the border background image.

For horizontal, this can be done in one of two ways. First, by using a table with its width specified to the width of the viewing area on the page which is equal to or less than the image size. This page was created using this technique. The second, and more difficult to get positioning how you want it, is to use non-breaking spaces, line breaks, and paragraph positioning codes.

For vertical, you will have to play around with inserting paragraphs and line breaks, and perhaps use the PRE /PRE codes to get the page height correct.

Dual Borders:

There are two ways to create a dual border (left and right). One way is to create an actual dual border in the image itself (examples of these types of dual borders are the second, third, and fourth borders in the dual borders section on the Miscellaneous Borders Backgrounds page). Another way is to create a smaller pixel width image, which repeats itself on the page. The first dual border in the dual borders section on the Miscellaneous Borders Backgrounds page is an example of a repeating dual border.

Borders with Transparent Text Areas:

A nifty border background type is a border image which has an accompanying text area that is transparent. With these types of backgrounds, you are able to combine in the BODY tag the background image tag along with a BGCOLOR tag to create a multiple of different web page looks using the same background.

Left click to see some examples of using
border backgrounds with transparent text areas.


Positioning of Text:

Perhaps the most frustrating thing, and which took a lot of patience and hard work learning, was how to position text on the page using a border background. The easiest and most reliable method to do this is to use a table, a table or tables within a table, or even multiple tables. Viewing my pages, you may have noticed that I make extensive use of tables to position text and images on a page. In my experience, except for using an image map (an advanced HTML programming tool, and one which few people have available in creating personal web pages), use of tables provides the greatest flexibility for creating your page to appear as you desire (this page itself is an example). If you wish to check out the HTML programming to create this page, right click on the page and click "View Source". Make sure to close out the pop up view window to return here.

For positioning text on the page, where the border is a design over which text should not appear, there are two methods to prevent text from appearing in that area.

The first and easier method [but which does not provide the flexibility necessary for using border areas which are to include text (discussed later)], is to use a transparent spacer gif image in the appropriate TD tag(s), with the IMG SRC tag having the width necessary specified in the tag.

Left click for a transparent spacer.gif download page you may use. This spacer.gif is the same as the vspacer.gif you will find recommened on other sites. I just dropped the "v", as it saves time and typing strokes.

The horizontal and vertical example pages above utilize a spacer.gif in TH and TD tags.

The second, and decidedly more difficult way [but the one I learned first through trial and error] and provides the flexibility of including text in a border image area, is to use a TD tag specifying a WIDTH in the tag sufficient to force text in the abutting TD tags outside the image area and then including text or a PRE /PRE tag combination in the table's first TD tag [for horizontal (left or right) borders] in each row. For top borders, use a TH (table header) tag or a TD tag in the first TR row, with sufficient PRE /PRE and forced lines entry breaks within the PRE codes to force the next row of the table below the top border image. For dual borders, you need to use the horizontal method in both a left and right TD tag, reserving the middle TD tag(s) for the text area. This page was created using the second, more difficult method, and is an example of a horizontal forcing of text past the border image.

A full discussion of using tables is beyond the scope of this page. The flexibility of using tables is shown throughout this site. The Aquarium in the Fishing page section is a good example.

I hope some of these tips help you in using border backgrounds in creating your web pages. If you have further suggestions or tips, please email me at mal57@hotmail.com. Thanks.

Return to Borders Backgrounds Directory

1