How to make header like that in css?

Question

My site code is very usual

<div class="header"></div>
<div class="site-inner"></div>
<div class="footer"></div>

How can I make header background like on the image? Is the whole site content have to be position absolute and margin-top:-500px ?

Is that only case to do it?

Answer 1

I assume you mean the overlap.

Negative margin is one way.

.header {
  height: 50px;
  background: lightblue;
}
.site-inner {
  width: 80%;
  margin: auto;
  height: 50px;
  background: lightgrey;
  margin-top: -30px;
  box-shadow: 0 -2px 2px black;
}

<div class="header"></div>
<div class="site-inner"></div>

Answer 2

You can use:

.header{

  width: 80%;
  height: 75px;
  margin: 0 auto; 
  margin-top: -20px;
  background:#3A3A3A;


}

Answer 3

Take a look at positioning: Positioning, also z-index might be relevant: Z-index, notice in my example the negative index on .header-bg A quick example:

.header-bg {
    width: 100%;
    height: 200px;
    z-index: -1;
    background: lightblue;
    position: absolute;
    top: 0;
    left: 0;
}
.header {
    margin-top: 50px;
    height: 50px;
    background: grey;
    z-index
}
.menu {
    height: 80px;
}
.site-inner {
    height: 400px;
    width: 100%;
    background: red;
}

<div class="header-bg"></div>
<div class="header"></div>
<div class="menu">menu</div>
<div class="site-inner">Site inner</div>
<div class="footer"></div>

Answer 4

A negative z-index lets you put elements behind others. The answer is simple enough then.

<div class="color"></div>
<div class="fixed">
    <div class="header">

    </div>
    <div class="nav">
        Text
    </div>
    <div class="body">

    </div>
</div>

---

html, body
{
    height: 100;
    margin: 0;
}

div.color
{
    position: absolute; /*Take out of the flow*/
    top: 0; /*Move to top left*/
    left: 0;
    z-index: -1; /*Place below normal elements in the flow*/

    width: 100%; /*Fill whole width*/
    height: 300px; /*300px tall*/

    background: #c7edfb; /*Color specified*/
}

div.fixed
{
    margin: 50px auto 0; /*push whole document down 50px and center*/
    width: 600px; /*document is 600px wide*/
}

div.header
{
    height: 150px; /*top gray block is 150px tall*/
    background: #222; /*dark gray*/
}

div.nav
{
    padding: 25px 0; /*Gap between blocks above and below*/
}

div.body
{
    min-height: 300px; /*Force a height*/
    background: #777; /*Light gray*/

    box-shadow: 0 0 8px black; /*Drop shadow*/
}

JSFiddle