How can I join background images?


Tags: html,css

Problem :

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:

alt text alt text alt text

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:

alt text

And this is how it should look:

alt text

How can I make this effect happen?



Solution :

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.


    CSS Howto..

    How do I make the box smaller in html?

    CSS and jQuery - how to force 2 rules to work together

    How to position the twitter widget

    How to create rounded shape by CSS

    How would I make this into an dynamic :nth-child css selector [duplicate]

    How to Add Class to Bootstrap Thumbnails on Slider Change

    Using CSS how best to display name value pairs?

    How to align logo and text in bootstrap on small screens?

    Fuelux, how to fix the width of a repeater column

    How to change color of selection in Select2 4.0.1?

    How to position an image inside a DIV with dynamic height with pure CSS/HTML?

    how to replace a link name text

    LESS - confusion about how mixins take parameters

    How to top-align smaller inline-block elements next to larger elements?

    CSS selector: how to make 2 spans each fill 50% of their parent's width?

    How to load an image with css using Django

    How can I specify distance between list items?

    How to animate multiple elements at the same time?

    How can I make height: “100%” work cross browser in CSS?

    CSS: How to use vmin unit in IE9?

    How to Stop Overriding of Bootstrap Css Styles

    How to use CSS calc according to a certain amount of li's?

    JQuery : How to disable mouse move vertically?

    how to drag and drop a
    across the page

    Panel in Horizontal List item showing behind Button

    How to show/hide hidden HTML table rows using JavaScript (no jQuery)

    How can i get List items to stay together using CSS?

    How can I make the first letter push itself into the paragraph like a newspaper style

    Angular. How to set css properties for “after” and “before” DOM psuedo elements

    How can I center this textbox using CSS?