Help creating HTML page with curved header section

Question

I was wondering, what is the best way (using html, css, and graphics) to create a web page whose top header section appears to be beveled, as opposed to straight across? Please see the below image as an example:

I'm not sure how to use images in a way such that they would expand/contract in accordance with different browser sizes/resolutions...

Can anyone offer me some help? Or perhaps point me to a resource?

Thanks!

Answer 1

You could use border-radius.

See my example on jsFiddle.

Answer 2

Mine is a cleaner version of @Alex's:

Live Demo

.head {
    -webkit-border-top-left-radius: 40% 80px;
    -webkit-border-top-right-radius: 40% 80px;
    -moz-border-radius-topleft: 40% 80px;
    -moz-border-radius-topright: 40% 80px;
    border-top-left-radius: 40% 80px;
    border-top-right-radius: 40% 80px;

    background: blue;
    height: 280px
}

<div class="head"></div>

It obviously won't work in IE.