View Full Version : Spry Verticle Menu background image

04-08-2010, 03:05 PM
I am trying to put a background iame on my spry vertivle menu.
so I made an image the size and shapre for wht I would need.

I added the image to: ul.MenuBarHorizontal a
but it treats the image as if it were a single peice for wach button.
But what I want is the whole panel to lay on top of my image.

Am I doing this wrong?

04-08-2010, 07:33 PM
I have been doing some research on how to achieve my goal here and I am still a bit confused. Is it not possible to have 1 graphic image that the whole verticle menu sits in?

04-08-2010, 07:34 PM
http://www.schylling.com/950-2.html This is my test page....

Any help would be greatly apprecaited.

04-08-2010, 08:48 PM
The background should be applied to the wrapper that holds the whole vertical menu not a particular UL. In this case it seems to be
<td width="165">
you could assign an ID to this particular TD and on the CSS page: apply the background image that you are talking about to the ID you'll use.

04-08-2010, 10:09 PM
You've got that image applied all over the place. I'd begin by deleting the background image property everywhere within the menu except for:

ul.MenuBarVertical {

And see how things turn out.

04-09-2010, 01:09 PM
Ok, I removed all the image tags and added this:
<td width="165" background="950/vert-img.png">

which looks ok in dreamweaver but on the site itself it still has a white background and the colored image behind it.

04-09-2010, 01:20 PM
So I have to assign an ID to this Td: <td width="165">
In my CSS I have an ID called td-img which contains: url(http://www.schylling.com/950/vert-img.png)

How do I assign the ID to it?

04-09-2010, 01:31 PM
Here is some more info:
I have this in my header: td-img {
background-image: url(http://www.schylling.com/950/vert-img.png);

and this for my column:
<td class="td-img" width="165">

THis is not working... so I have missed something baisc when it comes to assigning a style/.

04-09-2010, 01:55 PM
Scrap that... I have made some updates and it looks like this:

Inside the <head>

<style type="text/css">
.cellback {
background: url(950/vert-img.png) repeat-x;
border-right: 1px solid black;
width: 160px;
padding: 2px;


<td width="65" height="380" class="cellback">

Which looks great in Dreamweaver but does not show on IE but does show in Safari and Firefox!

04-09-2010, 04:20 PM
Here is a rough idea of the way you could go about it.


Hopefully that will guide you somehow.

04-09-2010, 05:08 PM
I was able to get the image in place... its a little tricky with the padding and such... thanks for your help!

04-09-2010, 05:48 PM
No problem. Cheers :D