Trying to add a background image to main page

[ajhb]

Hi,

I want to add a background image to a table placed on the main page via the define pages editor, but I seem to be having problems with the syntax (could be my CSS, which is a bit shaky).

Code is

<table width="550" border="0" cellspacing="0" cellpadding="0" class=".mainPageImage">
  <tr>
    <td colspan="2" width="350"</td>
    <td width="250">Fantastic imported chocolate right here in Hong Kong Chocolate for health Loren Ipsum wibbleChocolate for health Loren Ipsum wibbleChocolate for health Loren Ipsum wibbleChocolate for health Loren Ipsum wibbleChocolate for health Loren Ipsum wibbleChocolate for health Loren Ipsum wibbleChocolate for health Loren Ipsum wibbleChocolate for health Loren Ipsum wibbleChocolate for health Loren Ipsum wibbleChocolate for health Loren Ipsum wibbleChocolate for health Loren Ipsum wibble</td>
  </tr>
</table>

and I've placed the following at the bottom of the main stylesheet

.mainPageImage  {
background-color: blue;
background-image: url(<?php echo '<img src="' . HTTP_SERVER . DIR_WS_CATALOG . 'images/orange/main_page_chocolate_bar.jpg" alt="chocolate" width="170">' ?>); 
background-repeat: no-repeat;"

}

It's not throwing an error, just not showing any background. Note I wanted to do it like this as I want to position some text over the top of a graphic (using text for better SEO), so if anyone has a better solution would be happy to try another method.

Cheers,
Adam.

[gjh42]

class=".mainPageImage">

needs to be

class="mainPageImage">

The dot is only used in the stylesheet to indicate a class, just as the # is only used in the stylesheet to indicate an id.

Also, you can't use PHP in a stylesheet:

background-image: url(<?php echo '<img src="' . HTTP_SERVER . DIR_WS_CATALOG . 'images/orange/main_page_chocolate_bar.jpg" alt="chocolate" width="170">' ?>);

You should use a relative url instead:

background-image: url(../images/orange/main_page_chocolate_bar.jpg);
width: 170px;

and the image (which is part of the template) should be saved in /includes/templates/your_template/images/, not the basic /images/ folder which is for products.

[gjh42]

If you want the element to be 250px wide, eliminate any mention of 170px. Just make the image itself that wide. CSS can't change the display size of an image, only the size of frame for it to be displayed in.

[ajhb]

Doh! Should have spotted that - thanks for the quick reply, Glenn.

Now I have another problem (albeit more minor)...I can get the image to display without a problem using an absolute address

.mainPageImage  {
background-image: url(http://localhost/chococielo/zen-cart/images/orange/main_page_chocolate_bar.jpg); 
background-repeat: no-repeat;"

}

but it doesn't work if I try to use PHP to call the image

background-image: url(<?php echo '<img src="' . HTTP_SERVER . DIR_WS_CATALOG . 'images/orange/main_page_chocolate_bar.jpg" alt="chocolate" width="170">' ?>);

Any idea's???

Cheers,
Adam.

[gjh42]

You can't use PHP there.

Read the rest of my post above.

[ajhb]

Sorry, in my haste I'd completely missed the second bit, will try the relative path you've recommended - many thanks again.