Jump to content
  • Checkout
  • Login
  • Get in touch


The e-commerce.

How to use a gradient?


Recommended Posts

I want to put a gradient in the header so it goes from one colour down to another, and I also want to use a gradiant in the navigation boxes. Like what has been done on this site:




I have the gradiant as a picture file and have uploaded it but I cannot get it to work. I have been making the changes in the stylesheet. Is this correct? Does anyone know how to do this?

Link to comment
Share on other sites

You're right is is a picture file. You have to set it as the background to the table cell you want to have the gradient background.


You can do this with css or add it in the header.php file.


For example:


<td valign="middle" background="image.jpg" ><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?></td>


Hope this helps?


Link to comment
Share on other sites

Thanks. I tried that but I couldn't get that to work, however I made the following changes to the stylesheet:


TR.header {
 background-image: url('images/blue_gradient.jpg');
 background-repeat: repeat-x;


That fixed it.

Link to comment
Share on other sites


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

  • Create New...