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


Tags: html,css,image,asp.net-mvc-4

Problem :

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>


Solution :

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


    CSS Howto..

    responsive html shows a tablet css design instead of the mobile when on my iphone 4s?

    How to create an image hover fade effect with jQuery and CSS?

    How to magnify a pure CSS menu item when hovering using JS?

    How do I add another css to Bootstrap?

    How to display 3 buttons on the same line in css

    How to change the Color of dynamically created divs on click event, who are having same class?

    how to specify background text rectangle color in CSS

    How do I conditionally apply CSS styles in AngularJS?

    How to modify wordpress plugin css [closed]

    How can I build a CSS selector that will highlight/outline a focused tab, while not effecting other non-tab widgets?

    How to add custom CSS/JS to Grails 2.4.x layouts/templates?

    FontAwesome icon showing as black box. What CSS is needed to display icon?

    Rollover table shows hidden span class text with css

    How to make my PHP code, display in html table?

    How to style a table from horizontal layout to vertical layout with CSS

    How to make css styles in the document body only specific to a div

    how to bold words within a paragraph in HTML/CSS?

    How to maneuver between two divs using CSS?

    How do I change the font colour of text nested within a placeholder of an input search [duplicate]

    How can I have a CSS style different for IE6?

    How can I slow down my CSS Animated Text transitions?

    How to remove unwanted white space in CSS

    how do I modify a :hover style using JavaScript / jQuery?

    Showing border when clicking icon on phones browser

    How can i make these tabs Responsive

    How to create angled double border effect CSS

    CSS breadcrumb - how to make radius small

    how to arrange div without disturbing the page design

    How to make div to expand vertically without using overflow or javascript or hardcoded values such as margins

    how can I set the opacity of the background of a span, but not the text? [duplicate]