Change background color to an image, and banner header

I would like to change the background color to an image.

I would also like to have the header banner change to a specified image for each category selected, instead of 1 static image.

I'm running the latest version of zen cart and I'm slowly learning. So far I'm stoked!

OK solved one of my questions. I added 'background-image: url(../images/tile_1.gif);' to line 339. of stylesheet. ```php
#navColumnOne, #navColumnTwo {
background-color: transparent;
background-image: url(../images/tile_1.gif);
}

I have just finished a little mod for per-category/per-page header background images, so you are the lucky guinea pig - er - first recipient.

Description:

Display header bg image for individual top cat, or current page base, if corresponding image exists in /includes/templates/your_template/images/.

Name images like headerbg_23.gif for cat 23 & subs, or headerbg_shippinginfo.gif for shipping & returns page.
Name default image headerbg.gif.
Add a class to your stylesheet for each image, like

#headerWrapper.headerBG_23 { background-image: url(../images/headerbg_23.gif);}

#headerWrapper.headerBG_shippinginfo { background-image: url(../images/headerbg_shippinginfo.gif);}

with any other styling you desire.

Find in /includes/templates/your_template/common/tpl_header.php

<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>

<div id="headerWrapper">
<!--bof-navigation display-->

and replace with

<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>
<!--per-category/per-page header bg images - gjh42  2007-12-11-->
<!--
Display header bg image for individual top cat, or current page base, if corresponding image exists in /includes/templates/your_template/images/.
Name images like headerbg_23.gif for cat 23 & subs, or headerbg_shippinginfo.gif for shipping & returns page.
Name default image headerbg.gif.
Add a class to your stylesheet for each image, like 
#headerWrapper.headerBG_23 { background-image: url(../images/headerbg_23.gif);}
with any other styling you desire.
-->
<?php $alt_header_image = '';
if ($current_page_base == 'index' or 'product_info') { //add _ and top cat id to bg filename only if cat bg image exists
  $alt_header_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'headerbg_' . str_replace(strstr($_GET[cPath],'_'),'',$_GET[cPath]) . '.gif'))?'_' . str_replace(strstr($_GET[cPath],'_'),'',$_GET[cPath]):'';
} else { //add _ and page base to bg filename only if page bg image exists
  $alt_header_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'headerbg_' . $current_page_base . '.gif'))?'_' . $current_page_base:'';
}?>
<!--/per-category/per-page header bg images-->
<div id="headerWrapper" class="headerBG<?php echo $alt_header_image;?>">
<!--bof-navigation display-->

If you want to use jpg or png images, change the instances of ".gif" accordingly.

Erratum: Change

if ($current_page_base == 'index' or 'product_info') {

to

if ($current_page_base == 'index' or $current_page_base == 'product_info') {

The original appeared to be working correctly while testing, but was apparently changed since the last version I tested.

Thanks I'm going to give a go right now!

How would I get this to work with #logoWrapper ?

I can't get it to work... :(

Change the```php

and change

to```php

Rework the stylesheet declarations like```
#logoWrapper {
background-image: url(../images/headerbg.gif);
width: xxxpx;
height: xxxpx;
}

#logoWrapper.headerBG_23 { background-image: url(../images/headerbg_23.gif);}

#logoWrapper.headerBG_shippinginfo { background-image: url(../images/headerbg_shippinginfo.gif);}

If you want the clickable home link feature of the logo, you will probably best use #logo instead of #logoWrapper. Also, if you are using IE, you will need to edit /includes/languages/english/your_template/header.php to use pixel_trans.gif, so that IE doesn't collapse the div: ```php
define('HEADER_LOGO_IMAGE', 'logo.gif');

change to

define('HEADER_LOGO_IMAGE', 'pixel_trans.gif');

Glen sir, I owe you a coke!

Thank you soo much.

Works flawless so far.

This code can actually be transplanted to pretty much any file and hooked in to switch bg images in any location, as long as there is a corresponding div to work with.

This code is now available in Downloads > Other Modules as Smart Backgrounds.

There are some enhancements and extensions to its use, detailed in the readme.

Thanks again for the help.

This mod works perfectly!