Changing Main Image Code on the Template

The main "banner" type images used on Allwebco templates are setup in 3 different Ways. Some templates will tile or repeat the image, some will stretch the image to fit and some will be an exact fit to one side or the other and a blank area or some other element on one edge.

Click to view these styles
Tiled style image
Blank on one side (sized) style
Two piece sliding
Background and image on page (so image will print)
Stretched image style (This style is now obsolete)


How to change the banner code
Perhaps you have a tiled image template and want to make this a stretched image style on the index.html (or other HTML page). First, find the following code (look for "PICTURE TABLE" in the HTML page):

Example #1
<!-- PICTURE TABLE -->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td background="picts/about.jpg">
<a href="index.html"><IMG SRC="picts/spacer.gif" border="0" width="700" height="80"></a><br>
</td></tr></table>
<!-- PICTURE TABLE -->


Example #1A (From a chrome drop menu model)
<!-- PICTURE TABLE -->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td background="picts/about.jpg">
<a href="index.html"><IMG SRC="picts/about.jpg" border="0" width="700" height="80"></a><br>
</td></tr></table>
<!-- PICTURE TABLE -->


Note that in the above code the about.jpg is setup as a background and the spacer.gif is used to hold the correct amount of space open (in the chrome model the spacer is the about.jpg instead). There are different ways to make this not tile:

Option #1: If you have set a background image like above that means it can be any size you like and it will not affect the overall page size. Make your image 1500 pixels wide or wider and most viewers will not see the tiling.

Option #2: You can recode this to stretch this image. First, remove this exact code: background="picts/about.jpg". Now, change this part picts/spacer.gif to this "picts/about.jpg". Finally, change the width="700" to width="100%" and you should have a stretched image instead of a tiled one. Here is an example of the new code:

Example #2
<!-- PICTURE TABLE -->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td>
<a href="index.html"><IMG SRC="picts/about.jpg" border="0" width="100%" height="80"></a><br>
</td></tr></table>
<!-- PICTURE TABLE -->


Option #3: You can have a sized image and a background color on one side or the other. Here is an example of that code with a black background (new code is in red):

Example #3
<!-- PICTURE TABLE -->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#000000"><tr><td align="left">
<a href="index.html"><IMG SRC="picts/about.jpg" border="0" width="700" height="80"></a><br>
</td></tr></table>
<!-- PICTURE TABLE -->


Removing the tiling on some models:
From the code below on a chrome drop menu, remove only the background="picts/about.jpg" code and adjust the width for your image size. This code is the "Background and image on page" style as shown above in the example links.

Example #1 (From an Chrome Model)
<!-- PICTURE TABLE -->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td background="picts/about.jpg">
<a href="index.html"><IMG SRC="picts/about.jpg" border="0" width="700" height="80"></a><br>
</td></tr></table>
<!-- PICTURE TABLE -->


Other Notes: The above examples show you how to change from a tiled style to another style. In general, if you have a stretched style and want a tiled image you will edit example #2 to look like example #1 above. If you have a sized image and want to use another style you would take example #3 and recode it to look like either example #1 or #2.

More Notes: Some templates such as OSnine or some "Webmaster" models have the header image in the header.js or menu_header.js and you will need to edit that file to change the image code type.

Menu Notes: In some templates if you change the image code you may need to move the menu. To move the menu you will edit either the menu.js or your .css file.



Related Topics:
Making tiled images
Replacing the template pictures


Allwebco Template Support


Allwebco Website Template Support


See Also...
Replacing Images
Making Tiled Images