Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

table background image


ozblue

Recommended Posts

Posted

G'day

 

I have just install STS 4.4 and wish to add a background image to a table at the top (100% x120 - "0' margins) the image is 1 x 125 pix and will repeat across the screen to form a gradient "bar" but i can;t get it to work.

I have searched the forums and the best i can work out is that the Style sheet might have something to do with it but no real solution to my problem,

here is some of the code

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html $htmlparams>
<head>
<!--$headcontent-->
 <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">

[color="#FF0000"]<table border="0" width="100%" cellspacing="0" cellpadding="10" background="images/Head_back.jpg" height="120">[/color]  <tr class="header">

   <td valign="middle" width="45%" height="99"> <img border="0" src="images/oscommerce.gif"></td>

   <td align=right width="55%" height="99"> <a href="$urlmyaccount"> <img border="0" src="images/header_account.gif"></a> 
     <a href="$urlcartcontents"> <img border="0" src="images/header_cart.gif"></a> 
     <a href="$urlcheckout"> <img border="0" src="images/header_checkout.gif"></a> 
   </td>
   </tr>
</table>

 

I have tried absolute and relative paths, images are upload (the capital "H" in the image name is bad coding i know).

 

Outside the OSC enviroment the "background="images/Head_back.jpg" height="125" works on a normal HTML page but not in OSC

 

image uploaded to catalog/images and catalog/includes/sts_templates/full/images

 

can anyone help, am i doing this the right way or is there a better way.

 

Thanks

Paul.

Posted
G'day

 

I have just install STS 4.4 and wish to add a background image to a table at the top (100% x120 - "0' margins) the image is 1 x 125 pix and will repeat across the screen to form a gradient "bar" but i can;t get it to work.

I have searched the forums and the best i can work out is that the Style sheet might have something to do with it but no real solution to my problem,

here is some of the code

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html $htmlparams>
<head>
<!--$headcontent-->
 <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">

[color="#FF0000"]<table border="0" width="100%" cellspacing="0" cellpadding="10" background="images/Head_back.jpg" height="120">[/color]  <tr class="header">

   <td valign="middle" width="45%" height="99"> <img border="0" src="images/oscommerce.gif"></td>

   <td align=right width="55%" height="99"> <a href="$urlmyaccount"> <img border="0" src="images/header_account.gif"></a> 
     <a href="$urlcartcontents"> <img border="0" src="images/header_cart.gif"></a> 
     <a href="$urlcheckout"> <img border="0" src="images/header_checkout.gif"></a> 
   </td>
   </tr>
</table>

 

I have tried absolute and relative paths, images are upload (the capital "H" in the image name is bad coding i know).

 

Outside the OSC enviroment the "background="images/Head_back.jpg" height="125" works on a normal HTML page but not in OSC

 

image uploaded to catalog/images and catalog/includes/sts_templates/full/images

 

can anyone help, am i doing this the right way or is there a better way.

 

Thanks

Paul.

 

Use your stylesheet to do it:

add this to a seperate class for the individual table or if it is for the main body then add it to the BODY class

 

.classname }

background-image: url("images/Head_back.jpg ")

{

 

 

 

 

BODY {

 

background-image: url("images/Head_back.jpg ")

 

}

Posted

Hmm where did my other reply go !

anyway....................Take Two

 

Chris thx 4 info but i still cant get it to work, must be the way i am trying to put it together.

i googled CSS tutorials and still can't work it out

 

here is what i have done

.css file

A:hover {
 color: #AABBDD;
 text-decoration: underline;
}

FORM {
display: inline;
}

[color="#FF00FF"]TABLE.start }
background-image: url("images/testback1.jpg ")
{[/color]
TR.header {
 background: #ffffff;
}

 

and my Index file

<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">

[color="#FF0000"]<table class="start"[/color] border="0" width="100%" cellspacing="0" cellpadding="10" height="120" >

 <tr class="header">

   <td valign="middle" width="45%" height="99"> <img border="0" src="images/oscommerce.gif"></td>

 

 

any help appreciated

 

Thx Paul

Posted
Hmm where did my other reply go !

anyway....................Take Two

 

Chris thx 4 info but i still cant get it to work, must be the way i am trying to put it together.

i googled CSS tutorials and still can't work it out

 

here is what i have done

.css file

A:hover {
 color: #AABBDD;
 text-decoration: underline;
}

FORM {
display: inline;
}

[color="#FF00FF"]TABLE.start }
background-image: url("images/testback1.jpg ")
{[/color]
TR.header {
 background: #ffffff;
}

 

and my Index file

<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">

[color="#FF0000"]<table class="start"[/color] border="0" width="100%" cellspacing="0" cellpadding="10" height="120" >

 <tr class="header">

   <td valign="middle" width="45%" height="99"> <img border="0" src="images/oscommerce.gif"></td>

any help appreciated

 

Thx Paul

 

 

this statement here:

 

TABLE.start }

background-image: url("images/testback1.jpg ")

{

 

change it to

 

TABLE.start {

background-image: url("images/testback1.jpg ")

}

 

You had your opening and closing brackets around the wrong way. Slight error we all make.

 

Try that and see if it works for you

Archived

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

×
×
  • Create New...