Question

I have an unordered list in a navigation with a separator like so:

background: {url("images/navseperator.png") no-repeat scroll right top transparent}

This works fine but I want to add the same image to the left something like so:

background: {url("images/navseperator.png") no-repeat scroll LEFT top transparent}

When I add this line the original separator on the right disappears and replaced by the one on the left only.

How would I add this background image to both the left and right hand sides of this element?

Answer 1

CSS2< only support one background image. but if you are using css3,

background: url("images/navseperator.png") no-repeat scroll right top transparent, url("images/navseperator.png") no-repeat scroll LEFT top transparent;

for css2 ,

<div class="left">
    <div class="right">
        content here
    </div>
</div>

.left{
    background: url("images/navseperator.png") no-repeat scroll LEFT top transparent;
}
.right{
    background: url("images/navseperator.png") no-repeat scroll right top transparent
}