How to use css and images to create a rounded header section in an HTML page?

Question

That was a mouthful....

So, I'm stuck with an image from Marketing that has a picture of some people, it has the top left and right corners rounded AND it has a gradient transition from the bottom to the top (dark blue to a lighter shade).

So what I have done is cropped the LEFT (180px x 10px) and RIGHT (180px x 10px) rounded corners and made separate images out of them, then cropped another image that only contains the gradient blue (180px x 10px without the people in it), and what is left is the image with the people in it (180px x 461px). So know I have 4 images total.

Finally, the question:

How do I arrange the filler div so that it expand and contracts on re-sizing of the browser (fills the space between the left rounded corner and the image of the people?

Thank you, Stephen

<style>
#left {
    height:180px;
    background-size: 100%;
    background-size: cover;
    background-position: center center;
    vertical-align: top;
    width: 10px;
    background-image: url("@Url.Content("~/Content/images/login/left.png")");
}  

#filler {
    height:180px;
    background-size: 100%;
    background-size: cover;
    background-position: center center;
    vertical-align: top;
    width: 50px;
    background-image: url("@Url.Content("~/Content/images/login/filler.png")");
}  
#image {
    height:180px;
    background-size: 100%;
    background-size: cover;
    background-position: center center;
    vertical-align: top;
    width: 461px;
    background-image: url("@Url.Content("~/Content/images/login/image.png")");
}  
#right {
    height:180px;
    background-size: 100%;
    background-size: cover;
    background-position: center center;
    vertical-align: top;
    width: 10px;
    background-image: url("@Url.Content("~/Content/images/login/right.png")");
}  

</style>


<div class="row-fluid">
    <div id="left" class="pull-left"></div>    
    <div id="filler" class="pull-left"></div>
    <div id="right" class="pull-right"></div>
    <div id="image" class="pull-right"></div>   
</div>

Answer 1

<div class="row-fluid">
    <img src="http://mydomain.com/pic.jpg" />  
</div>

.row-fluid{
background: #fff;
}

.row-fluid img{
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
}

and this is the demo: http://jsfiddle.net/Ashkanvb/rsPp2/

Answer 2

I agree with the border-radius answer. But, if it turns out (for whatever reason) that you must use the images then there's a solution with some tweaked HTML and CSS here:

http://jsbin.com/AwUWabI/7/edit