Question

I have three images that I would like to join in a widget I’m creating in Html. I just want to give the round effect on the corners.
These are the three images:

I have the middle one repeating in my css so that it fills up the space between the two edges.

.widgetMainLeft
{
    background: url('/Content/Images/Title_Bar_Left.png') no-repeat;
    width:6px;
    min-height:100%;
}
.widgetMain
{
    background: url('/Content/Images/Title_Bar_Middle.png') repeat-x;
    text-align:left;
    margin-top:auto;
    min-height:100%;
}
.widgetMainRight
{
    background: url('/Content/Images/Title_Bar_Right.png') no-repeat;
    width:6px;  
    min-height:100%;
}

I am placing these three classes in one container class, but it simply displays the middle one. The background images are at the top of the widget where the title is.

<div class="widgetBody">
    <div class="widgetMainLeft" />
    <div class="widgetMain">
        <div class="widgetTitle">Messages</div>
        <div class="widgetDisplayedArea">
            <table>
            ...
            </table>
        </div>
    </div>
    <div class="widgetMainRight" />
</div>

This is how the widget looks now:

And this is how it should look:

How can I make this effect happen?

Answer 1

There’s only one background that will be used, all other class settings will be overridden by the latest one being set.

Solution: create three containers instead of one, set each with it’s own class.