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

[Guest]

Hi,

 

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

 

Cheers

[blueline]

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

[Guest]

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

[burt]

Open up each of the main .php files in your catalog, and find the <td> that holds column_left.php

 

change it from <td> to <td class="bgimage">

 

Now open up stylesheet.css

 

and add:

 

.bgimage { background-image: url(http://yoursite.com/path/to/background/image.jpg)}

[Guest]

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>

[Guest]

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!

[Guest]

    <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);

}

[Guest]

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

[Guest]

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.

[Guest]

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

 

thanks anyway

[Guest]

Richard,

 

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

[Guest]

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.

[burt]

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">

[Guest]

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

[burt]

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.

[burt]

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 :)

[Guest]

Doh!!

 

 

Glad you got it working!