Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

i want to add a background image to the left column..HOW?


Guest

Recommended Posts

Posted

Hi,

 

i want to add a background image to the left column..HOW?

 

Cheers

Posted

Just open column_left.php in an editor, and in the first <table> that is announced in the file, simply insert background="somepic.jpg"> at the end.

 

Ex. <table width="100%" border="0" cellspacing="0" cellpadding="0" background="border123.jpg">

 

Hope this helps,

Chris

Chris Sullivan

Posted

Thanks but it only seem to put an image to the bottom of the left boxes, I want the image repeated all the way.

Posted

Burt, tried this but it din't show.

 

Can yopu add it to the code below where you think will work.

 

I've tried and must be doing something wrong.

 

    <td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="0">

<!-- left_navigation //-->

   <?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>

<!-- left_navigation_eof //-->

   </table></td>

Posted

i have tried all sort of combos from the column left to the mainpage etc, but i still can't get the bg image to repeat down the left column.

 

HELP!

Posted

    <td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="0"CLASS="COLUMN_LEFT">

<!-- left_navigation //-->

   <?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>

<!-- left_navigation_eof //-->

   </table></td>

 

Try it with the stylesheet. Add a class (see the CAPS above, but do it in lower case) Then add:

TABLE.column_left {

 background-color: #yourcolor;

 background: url(images/your_image.gif);

}

Posted

It puts the image in but only to the bottom of the bottom box not fill the whole column as i want it.

Posted

Hhhhmmm....that's very interesting...I just tried adding it to the class and that didn't do it either. I remember now that I had the same problem with my site...sorry I didn't remember sooner.

 

What I ended up doing was adding to my graphic and using it as the background for the whole page.

 

If you look at my site http://www.bird-e-toys.com/osc/catalog/default.php You'll see what looks like a graphic behind the left column (wide blue area). It is actually a 3 or 4 pixels high by 775 pixels wide and repeats vertically.BG.PNG

Posted

that's ok, i had already done the whole page but ideally just wanted the left column.... oh well!

 

thanks anyway

Posted

Richard,

 

You can send me the left column graphic and your main background and I can put them together if that would help.

Posted

Thanks i've already done that, they started as one image.

There must be a way and i'm a little baffled as to why the image stops at the bottom box.

Posted

You are both almost there:

 

<!-- body //-->

<table border="0" width="100%" cellspacing="3" cellpadding="3">

 <tr>

   <td width="<?php echo BOX_WIDTH; ?>" valign="top" class="bgimage">

Posted

Thanks Burt got it and it works.

 

class

.bgimage { background: url(images/menuback.gif)}

 

default.php

<!-- body //-->

<table border="0" width="100%" cellspacing="0" cellpadding="0">

 <tr>

   <td width="<?php echo BOX_WIDTH; ?>" valign="top" class="bgimage"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="0"> 

<!-- left_navigation //-->

   <?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>

<!-- left_navigation_eof //-->

   </table></td>

<!-- body_text //-->

 

Cheers

 

Richard

Posted
Thanks Burt got it and it works.
Knew it would ;) I use the exact same thing on one of my Osc sites...

 

Only thing:

.bgimage { background: url(images/menuback.gif)}

 

This URL should be an absolute URL in the form http://www.yoursite.com/whatever/image.gif

 

Or else it will not work as expected in older versions of some browsers.

Posted

ps, remember that now you have done it the proper way (using CSS) you can now do loads of funky things with that column.

 

Want a solid black line down it to seperate it from the content of your page?

 

.bgimage {  background: url(http://www.yoursite/images/blah.gif); background-color: #ffffff; border-color: #000000; border-style: solid; border-top-width: 0px; border-right-width: 1px; border-bottom-width: 0px; border-left-width: 0px}

 

And so on. Easy, eh. Have fun :)

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...