The world’s largest collection of Original Web Templates, Flash Templates, Print Templates and Graphic Elements

BoxedArt > Template Tutorial > Intermediate HTML Tips for Your Website Template > How to Add a Repeating, Solid, or Stretched Background to a Template

The BoxedArt Guide to Using Website Templates

How to Add a Repeating, Solid, or Stretched Background to a Template

In some cases you may decide that a template would look better with a background image or color to fill in the white space behind the web template design regardless of the viewer's monitor size or resolution. There are 3 common types of backgrounds, repeating patterns, solid colors, and stretched background images, which is essentially a smaller repeating pattern. The below tutorial will provide instructions for making the necessary graphics and applying them to your template.

Any image that is referred to as "background" in the HTML or CSS of your page will automatically repeat until it fills the screen. You do not have to include any html command telling a background image to repeat - it will do that automatically. Images to be used as repeating or stretched backgrounds are quite small so download speed is not an issue.

A common use for a repeating or stretched background image is to place it so that it tiles across the right side of the screen, filling any empty white space on monitors set at higher resolutions. The image that will repeat is actually a small piece of the right edge of your page's design.

To create such an image:

Launch Photoshop and open the page design's .psd in Photoshop.

You may create a new slice of the portion of the design you wish to be your background
(see Using Slice Lines or Producing New Slice Lines ),
or you may use the following method:

You will need to temporarily flatten the .psd so all layers are included in the selection you'll make.

Click the dropdown icon in the upper right of the Layers palette, then choose Flatten Image from the list.

Next, choose the rectangular marquis tool from the toolbar.

Click and drag on the edge of the document to create a narrow selection. Your selection can be any width you like, but the narrower it is (1 or 2 pixels), the smaller your resulting background image will be, and smaller=faster page downloads.

When your selection is made, go to Photoshop's top menu and choose Edit > Copy

Next, choose File > New from the top menu.
Click OK in the "New" dialogue box that opens, and go to Edit > Paste in the top menu, to paste your copied item into this new file.

Then go to File > Save and save this new image as a .jpg. Give it a name such as bg1, and save it into the appropriate folder for your template
(most commonly - html>(filled or blank)>images)

Lastly, open the HTML source code for the web page in a text editor such as Notepad.

In the <body> tag type background= followed by the path to the new image you made:

<body background="images/bg1.jpg">

If your web page uses CSS, the command will read:

body {
background-image: url(images/bg1.jpg);
}

If you're using an HTML editor such as Dreamweaver, click on Page Properties in the Properties panel and browse to the image you created:

Save your .html web page file. When viewed in a browser it will now have the new image (shown alone, at the left below) and repeating in the web page's background:

To give your page a solid background color, it usually isn't necessary to insert an image. HTML code can designate any solid color you choose. Although most browsers will understand simple color names such as "black", "red", "blue", etc., you have more options if you use hexadecimal color codes. Hexadecimal color codes are combinations of 6 letters and numbers preceded by the # sign. For example: #000000 is black, #ffffff is white, #e87f24 is gold, etc.

HTML editors such as Dreamweaver and image software such as Photoshop will give you the hexadecimal code for any color you choose, in their color pickers. The color picker windows for these types of programs will open automatically when you click anywhere in your design with the eyedropper tool, as pictured on the right -->

To apply a hexadecimal color to your web page's background, you insert a tag into the HTML code, in the body tag:

If your web page is using CSS, the background color command will look like this:

body {
background-color: #1e3c52;
}

(Note: if you do not have access to a program that presents you with the color codes, a Web search on "hexadecimal colors" will bring up many sites that will do so for you.)

Table of Contents

BoxedArt Offers: Web Templates | Website Templates | Flash Templates | Web Site Templates | Templates