Left and Right background images, in CSS

Is it possible to use one image for a background, and two others for the left and right sides? I know this is possible using a table of some sort, but I'd like this to be scalable.

header {background-image: x.jpg left(y.jpg) right(z.jpg);}

Does something exist like this?

With tables, I was thinking something like this is possible:

<td background="x.jpg">Left side</td>
&开发者_C百科lt;td background="y.jpg">Center, title.</td>
<td background="z.jpg">Right side</td>

You can apply a single background (which may be an image) to a single element.

If you want three backgrounds, you need three elements, and if you want those elements to appear side by side then you have to position them side by side (which can be done any number of ways). You can further manipulate the position of the background of an element using background-position which you may have to because the alignment of backgrounds is totally independant.

The onyl reason this works for a table (which you should avoid like the plague unless the content of the table is actually tabular data) is because you have three elements.

Multiple background-images are coming, and there is a limited amount you can do right now with what support there is for CSS3 border-image, but at the moment there is no good, simgle-element, cross-browser way to do it.

This worked for me:

#hb-header {
height: 64px;
vertical-align: middle;
}
#hb-header .headleft {
float: left;
width: 64px;
height: 100%;
background-image: url('HeaderLogoLeft.png');
background-repeat: no-repeat;
background-position: 0 0;
}
#hb-header .headcenter {
height: 100%;
}
#hb-header .headright {
float: right;
height: 100%;
background-image: url('HeaderLogoRight.png');
background-repeat: no-repeat;
background-position: right;
}


<div id='hb-header' class='hb-header ui-widget-header ui-corner-all'>
    <div class='headleft'></div>
    <div class='headright'>
        <div style='margin-right: 72px;'>
            Version ${buildNumber}
            <div id='login' style='display:none;'><span id='login-user'></span> 
                <button type='button' id='logout' onclick="logout();" style='font-size:70%; line-height:1.0; padding:0.25em;'>Sign Out</button>
            </div>
        </div>
    </div>
    <div class='headcenter'>
        <h3 style='margin-left:72px;'>Hello World</h3>
    </div>
</div>