Using background-images for centerColumn

[SLeeeper]

I have spent days working on this and searching this forum. I really need some assistance with placing a background image behind the centerColumn.

Here is my tpl_index_default:

<?php
/**
 * Page Template
 *
 * Main index page<br />
 * Displays greetings, welcome text (define-page content), and various centerboxes depending on switch settings in Admin<br />
 * Centerboxes are called as necessary
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_index_default.php 3464 2006-04-19 00:07:26Z ajeh $
 */
?>

<div id="centerCatTop"></div>

<div class="centerColumn" id="indexDefault">



<div id="centerCatMid">
<h1 id="indexDefaultHeading"><?php echo HEADING_TITLE; ?></h1>



<?php if (SHOW_CUSTOMER_GREETING == 1) { ?>
<h2 class="greeting"><!-- removed php line by setting SHOW_CUSTOMER_GREETING == 0 --><?php echo zen_customer_greeting(); ?></h2>
<?php } ?>

<!-- deprecated - to use uncomment this section 
<?php if (TEXT_MAIN) { ?>
<div id="" class="content"><?php echo TEXT_MAIN; ?></div>
<?php } ?> -->

<!-- deprecated - to use uncomment this section
<?php if (TEXT_INFORMATION) { ?>
<div id="" class="content"><?php echo TEXT_INFORMATION; ?></div>
<?php } ?>-->

<?php if (DEFINE_MAIN_PAGE_STATUS >= 1 and DEFINE_MAIN_PAGE_STATUS <= 2) { ?>
<?php
/**
 * get the Define Main Page Text
 */
?>
<div id="indexDefaultMainContent" class="content"><?php require($define_page); ?></div>


<?php } ?>


<?php
  $show_display_category = $db->Execute(SQL_SHOW_PRODUCT_INFO_MAIN);
  while (!$show_display_category->EOF) {
?>

<?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_MAIN_FEATURED_PRODUCTS') { ?>
<?php
/**
 * display the Featured Products Center Box
 */
?>
<?php require($template->get_template_dir('tpl_modules_featured_products.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_featured_products.php'); ?>
<?php } ?>

<?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_MAIN_SPECIALS_PRODUCTS') { ?>
<?php
/**
 * display the Special Products Center Box
 */
?>
<?php require($template->get_template_dir('tpl_modules_specials_default.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_specials_default.php'); ?>
<?php } ?>

<?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_MAIN_NEW_PRODUCTS') { ?>
<?php
/**
 * display the New Products Center Box
 */
?>
<?php require($template->get_template_dir('tpl_modules_whats_new.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_whats_new.php'); ?>
<?php } ?>

<?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_MAIN_UPCOMING') { ?>
<?php
/**
 * display the Upcoming Products Center Box
 */
?>
<?php include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_UPCOMING_PRODUCTS)); ?><?php } ?>


<?php
  $show_display_category->MoveNext();
} // !EOF
?>
<!-- eof Center Catagories HTML -->
</div>

<!--  eof Center Cat bottom -->

<div id="centerCatBot"></div>
</div>

and here is a section of the CSS:

/******MOD SECTION******/
.centerColumn {
	background: #fff;
	width: 600px;
	}
#centerCatTop {
	background-image: url(/planet/includes/templates/Planet_Bandanas/images/center_c_t.gif) no-repeat;
	width: 650px;
	height: 23px;
	}

#centerCatMid {
	background-image: url(/planet/includes/templates/Planet_Bandanas/images/center_c_mid.gif) repeat-x;
	width: 650px;
	}

#centerCatBot {
	background-images: url(/planet/includes/templates/Planet_Bandanas/images/center_c_b.gif) no-repeat;
	width: 650;
	height: 25px;
	}

/*list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
	margin: 1em 0em;
	}

/*sideboxes*/
.columnLeft {}

The link to the home page is: http://www.bltgraphic.com/planet/

The site is running the latest version 1.3.8

Any help with this problem would be greatly appreciated.

[pjb923]

The css property "background-image" will only accept a single url value and you cannot add the repeat declaration on the same line. This is is not valid CSS syntax and the entire line is ignored.

Change all instances of "background-image" to "background".

[afo]

Change

#centerCatTop {
	background-image: url(/planet/includes/templates/Planet_Bandanas/images/center_c_t.gif) no-repeat;
	width: 650px;
	height: 23px;
	}

#centerCatMid {
	background-image: url(/planet/includes/templates/Planet_Bandanas/images/center_c_mid.gif) repeat-x;
	width: 650px;
	}

#centerCatBot {
	background-images: url(/planet/includes/templates/Planet_Bandanas/images/center_c_b.gif) no-repeat;
	width: 650;
	height: 25px;
	}

to

#centerCatTop {
	background-image: url(/planet/includes/templates/Planet_Bandanas/images/center_c_t.gif);
	width: 650px;
	height: 23px;
	}

#centerCatMid {
	background-image: url(/planet/includes/templates/Planet_Bandanas/images/center_c_mid.gif);
                background-repeat: repeat-x;
	width: 650px;
	}

#centerCatBot {
	background-images: url(/planet/includes/templates/Planet_Bandanas/images/center_c_b.gif);
	width: 650;
	height: 25px;
	}

I don't think it'll work if you change background-image to background.

[pjb923]

Either method will work.
The "background" selector allows you to declare all background properties in a single line. This includes background-color, background-image, background-repeat, background-attachment and
background-position.

This is a perfectly valid declaration.

background: url(/planet/includes/templates/Planet_Bandanas/images/center_c_t.gif) no-repeat;

Also, the default value for background-repeat will repeat in both x and y, so simply removing the no-repeat declaration may result in the image repeating where it's not desired.

[afo]

Learn something new every day!

[SLeeeper]

thanks guys...I found the "background: " first thing this morning. A little sleep helps....

also, I was working on the wrong tpl...I should have been putting it into "tpl_main_page.php"
Like this:

<!-- bof upload alerts -->
<?php if ($messageStack->size('upload') > 0) echo $messageStack->output('upload'); ?>
<!-- eof upload alerts -->
<!-- bof center catgory background (rounded corners) -->

<div id="centerCatTop"></div>
<!-- bof center catgory background fill  -->

<div id="centerCatMid">

<?php
 /**
  * prepares and displays center column
  *
  */
 require($body_code); ?>
<!-- eof Center Catagories HTML -->

</div>
<!-- eof Center Catagories HTML -->
</div>

<!--  eof Center Cat bottom -->

<div id="centerCatBot"></div>
<?php
  if (SHOW_BANNERS_GROUP_SET4 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET4)) {
    if ($banner->RecordCount() > 0) {
?>

/****** MOD SECTION ***************/
.centerColumn {
background: transparent;
width: 630px;
}
#centerCatTop {
background: transparent url(/planet/includes/templates/Planet_Bandanas/images/center_c_t.gif) no-repeat;
width: 650px;
height: 23px;
}

#centerCatMid {
background: url(/planet/includes/templates/Planet_Bandanas/images/center_c_mid.gif) repeat-y;
width: 650px;
}

#centerCatBot {
background: transparent url(/planet/includes/templates/Planet_Bandanas/images/center_c_b.gif) no-repeat;
width: 650;
height: 25px;
clear: both;
}

Now, does anyone know where to do the samething for the right column?

[afo]

That information belongs in a style sheet, not the tpl_ files

[SLeeeper]

Yes, the bottom code box was of the style sheet.

And I found a way to place the same rounded corners (via .gif images) on the right side column. It wasn't easy; if you put the "bottom image" where it should go, it falls out of a div opened somewhere else in the code. I could not find what was causing that problem, but found a work around.


The test site: http://www.bltgraphic.com/planet/

If anyone wants the details, let me know and I'll post them.