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..

    How to set background color of td in CSS

    Dropdown Menu doesn't show all links and can't change css social media icons color

    How can I absolutely position a related image_tag?

    How to place a color cover on top of an image in CSS

    How to conditionally resize image if screen not wide enough, with CSS?

    How to make a gallery

    How to display the :after content outside element

    How to scale an element when it loads using only CSS?

    how can i add a css file to body of a page?

    How to fix the headline row in a table using css? [closed]

    Ionic 2 - how to make ion-button with icon and text on two lines?

    How to make a function set css width with a JavaScript variable?

    How can I use :nth-child() to select every other
    within ALL children?

    How to define specific CSS rules for IE9 alone?

    How do I remove the side padding in the following case?

    How to use CSS with JS [duplicate]

    How to Detect css style by iPhone/iPad

    How to check if the flash message set is empty in cakephp

    How to create e-commerce website [closed]

    How to vertically align middle some header text between 2 header images on a website?

    How to blur a banner photo in CSS Style?

    How to make my a scalable website with auto:height and overflow:auto

    How to remove the double scroll?

    How can I modify left property after hide an element using JQuery?

    How to use a different stylesheet for iphone or android? I can modify only html later on

    How to randomly pick colors and shapes from a for loop and display it in another div?

    How can I get jQuery or Javascript to change css based on the current url?

    How to set minimum height for a div?

    jQuery - How to revert css changes when using slideToggle()?

    How do I remove flickering from my HTML page?