How To Create An HTML Image Background For Your Webpage
Posted: Saturday, October 03, 2009
by Sandee Lembke
Theme Party Queen.com
You can easily build an HTML image background for your webpages using everyday images, the Photoshop Slice Tool, an image background table and repeating HTML code. The beauty of this type of layout is that you do not need CSS and it expands with the length of your web page.
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. 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
Finding the Images
For the header and footer images, there are several combinations that will work, but if you want to keep it simple, use the same image(s) along the top that you use along the bottom.
One image can be copied and pasted repeatedly so that it fits the entire width of your template. An image of wood moulding, for example, can serve as the header across the top and can be flipped to be used along the bottom.
For the content holder, there are also several options. You can simply use a colored rectangle and add a shadow to it or you can use something like a picture frame to get a more ornate looking content holder.
Creating The Template For Your HTML Image Background
The template that you create in Photoshop is fully functional on it's own. All you have to do is add content to the middle section of the table.
NOTE: If you use a cascading stylesheet (CSS) on the same web page, it will interfere with the effectiveness of the template. In some cases your middle gif will repeat horizontally instead of vertically.
As an example, let's create a white document that is 950 pixels wide (this will be the width of your web page) by 600 pixels high (height isn't critical but pick something big enough so you can see what you're doing in Photoshop).
Before dragging your images onto the template, you may have to fiddle with them so that they match the width of your template. For example, if you choose an image of wood moulding that is only 250 pixels wide, you will need to duplicate the layer repeatedly and position them side by side to get a longer piece of moulding that is 950 pixels wide.
Sometimes when you copy and paste layers side by side like this, the seams will be visible. Use the Smudge Tool to blend the seams and then choose Layer-Flatten Layers so that you can easily drag the finished image onto the template and get it into position.
If you want to use this exact image along the bottom, duplicate the layer and move it to the bottom. If you want to flip it, choose Edit-Transform-Rotate.
After preparing the content holder image (the picture frame in the example above), drag it onto the template positioning it between the header and the footer and then use Edit-Transform-Scale to stretch it to size.
Add Header Text (Website Name...) and Footer Text (Copyright...).
If you want to fancy it up, use the Custom Shape Tool and pick small images to add interest to your template. The Spiral shape is a favorite. Use Edit-Transform and either Scale or Rotate to easily size and position them.
Find a complementary color in your images by using the Eyedropper Tool then fill the
white space on either side of the content holder using the Paint Bucket Tool.
Use Slice Tool to Divide Template into 3 Images
Slice the document into 3 smaller images horizontally. Grab the Photoshop Slice Tool from the Tool Palette. In the top toolbar, set the Style to "Fixed Size" to ensure exact proportions. Using the 950px X 600px example, input width and height as follows:
- Top slice equals 950px X 250px
- Middle slice equals 950px X 100px
- Bottom slice equals 950px X 250px
CAUTION: Make sure that your top and bottom slices are large enough to completely contain the header and footer respectively.
Now you have one document sliced horizontally into 3 smaller images. The next step is to "Save For Web" and upload each image as a separate gif. In the "Save For Web" dialog box, save each slice separately by clicking on the slice and naming it. Upload the 3 gif images as usual.
Create a table in the body section of your HTML document to hold the background image url for each gif and your content.
- The first row in your table contains the top gif
- The middle row contains your middle gif, the repeating HTML code and the content
- The last row in your table contains the bottom gif
These 3 gif images when displayed on a page will result in a one-of-a-kind, professional looking HTML image background, perfect for a simple web page or sales letter. The possibilities are only limited by your creativity.
Sandee Lembke invites you to visit Free-Website-Tutorials.com where you can watch a Video Tutorial showing step by step instructions on How to Create an HTML Image Background. All of the steps above are demonstrated in this Video Tutorial.
Also download a Free PDF Supplement showing Photoshop Slice Tool screen prints and copy the exact HTML Repeating Code required to create this web page effect.
This Article has been viewed 1,461 times. (Not updated in real-time.)
No comments yet.We want your comments! If you can read this, you don't have javascript enabled, so you can't use this comment system. Please enable javascript.