Home : Repeating Background

How To Create a Free Website Template Design
With a Repeating Background

Using this technique, a beginner can easily create a free website template design with a repeating background without using CSS. You will learn how to use your favorite images and create a stand alone web page template using the Photoshop Slice Tool and repeating HTML.

NOTE: This type of free website template design is meant to be used without a cascading stylesheet (CSS). Using one will likely interfere with the effectiveness of your template. In some cases your background will repeat horizontally instead of vertically.

I recommend that you first:

Read the high level process below
Download the video supplement and then
Watch the video and follow along with the printed supplement.

High Level Process

Find and fix images to use for header, content holder and footer
Open a new document in Photoshop the width of your web site
Drag the images onto the template and position them so that the finished template resembles a web page (header at top, content area in middle surrounded by a border and footer at bottom)
Add a background color if desired
Slice the template into 3 sections
Save each section as a gif image and upload as usual
Build a 3-row table in the body section of your HTML document to hold each of the 3 gif images (see code below). Top row holds top gif image, middle row holds middle gif image and bottom row holds bottom gif image
Use repeating HTML code in the middle row so that the HTML image background expands vertically with the length of the page

Video Supplement--Read as you Watch

I created this supplement in Powerpoint for you to use as you watch the video. It should help you better understand the process and give you something to take notes on as you go.

The supplement has several screen prints including an HTML document showing the code that you will use to create the repeating background.

Click here to download your free copy of how to create a Free Website Template Design.

Repeating Background Video Tutorial--Watch Now

How to Create a Free Website Template Design

Learn how to create a free website template design with a repeating background using your favorite images, Photoshop and repeating HTML. Perfect for a unique webpage or sales letter.

For more information, read my article on How to Create an HTML Image Background.

HTML Free Website Template Design Code

Once you get your shadow gif images ready, you will need to pull them into your HTML document. Feel free to copy the code below and update as needed.

<body style="background-color: #ffffff"> <TABLE width="950" cellspacing="0" cellpadding="0" align="center"> <tr> <td> <img src="http://www.your-domain-name.com/images/your-top-slice-name.gif" align="center" border="0" alt="Keyword Rich Description"> </td> </tr> <tr style="background-image: url(http://www.your-domain-name.com/images/your-middle-slice-name.gif)"> <td align="center"> <p>This is the content area of your site.</p> <p>This is the content area of your site.</p> <p>This is the content area of your site.</p> <p>This is the content area of your site.</p> </tr> <tr> <td> <img src="http://www.your-domain-name.com/images/your-bottom-slice-name.gif" align="center" border="0" alt="Keyword Rich Description"> </td> </tr> </table> </body>

People Interested in Repeating Backgrounds Also Viewed:

How To Create a Web Page Shadow
Watch this web page video tutorial and learn how to create a Web Page Shadow. The Photoshop Slice Tool is demonstrated and the exact HTML code is provided. This web page effect adds visual interest and professionalism to any site.