Question

I’m trying to use multiple background images to obtain this result on a liquid width div:

I have split the image in three parts:

And I’m trying to style the div like this:

        height: 14px;
        background-image: url(static/img/workspace-pre-hr-l.gif), 
            url(static/img/workspace-pre-hr-bg.gif),
            url(static/img/workspace-pre-hr-r.gif);
        background-repeat: no-repeat, repeat-x, no-repeat;
        background-position: left, center, right;

But the right margin doesn’t work and so I have this instead:

Any help? Thanks

EDIT
Fiddle! http://jsfiddle.net/J5Tsa/

SOLVED
Seems like it is a z-index problem among the images. Declaring the right margin before the repeated one solved the problem.

Answer 1

It is my understanding that images are stacked according to the order in which they are specified in the background-image property. So my theory is that workspace-pre-hr-r.gif is being displayed underneath workspace-pre-hr-bg.gif.

Try this…

background-image: url(static/img/workspace-pre-hr-l.gif), 
  url(static/img/workspace-pre-hr-r.gif),
  url(static/img/workspace-pre-hr-bg.gif);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left, right, center;