CSS border image left and border image bottom or 2 backgrounds

Problem

I have a class and what I am trying to do is apply a border-image-left and border-image-right (these are two different images)

What I have been able to do is this

background:url(http://jamessuske.com/freelance/heyheyandco/images/nav-border-bottom.png) bottom no-repeat;
background:url(http://jamessuske.com/freelance/heyheyandco/images/nav-border-left.png) left no-repeat;

but it will only show one of them :(

Is what I am trying to do possible?

Problem courtesy of: user979331

Solution

you can do this in CSS3:

http://www.css3.info/preview/multiple-backgrounds/

but for browser that don't support CSS3, you can do this:

HTML:

<body>
    <div class="container">
        copy
    </div>
</body>

CSS:

body{background: url(path/left.png) left;}
.container {background: url(path/right.png) right;}

If need be in the content-site container you can try pseudo elements :

<div><pseudo-element:before />site content<pseudo-element:after /></div>
Solution courtesy of: Riskbreaker

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.