The image of the track outline on the left is in its own div, with a z-index of -1. The part of that image that cuts across the menu div is a separate image set to the background of the menu div.

 

Now I need to do the same with the image of the track on the right, however I don't know how to position a background image from the right??

 

Have you got a bit of css/html to look at?

As you can't have 2 background images for the same element, you'll need to have the ul sat inside a div. One of the images would be the background for the ul and the other for the div.

As for positioning from the right, if you use percentage or pixel values, the first value is the horizontal and the second is the vertical so you could have something like:

ul {
background: url(myimage.jpg) 90% 50% no-repeat;
}

which would place the image 90% from the left and central vertically.

The two background images are on separate nested divs:

<div id="menu">

 

<div id="navbar" align="center"><div class="nav_inner">

<?php mosLoadModules ( 'top' ); ?>

</div>

</div>

</div>

 

The problem is the track outline on the right is in its own div that is aligned to the right, and at a fixed 80px. If I use a % on the bit that is inside the menu div then it won't position properly on various screen sizes/resolutions. I guess I could change the track outline div to a % position but I'd rather see if I can align the background image in another way. Guess I just prefer to do things the hard way! lol

I would suggest adding transparent space to the right of the image and just setting the horizontal position to "right".

What about:

 

float: right;
margin-right: ??px;

Thanks for the suggestion guys. The float right didn't quite work. Due to the menu system inside another nested div it was messing around with the layout. In the end I went with Onigiri's tip of adding space to the right of the image!