Prevent images from overlapping a fixed header - html

Question

I have a fixed header with three tabs. On the rest of the page I have both text and images. I was able to have text scroll "under" the fixed header but the images overlap. I tried setting the background of the header as an image but that did not work. I also tried various z-index values but also lacked results. I'm posting the CSS with no z-index on the header because it doesn't affect the fixed header in terms of the overlap problem, but only shifts it off-center. Is there a way to fix this with CSS?
Thanks
HTML Code:
<div class="header">
<div class="container">
<ul class="pull-right nav nav-pills">
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
</div>
</div>
<div class="content">
<div class="container">
<p>text here</p>
<img src="image.jpg"/>
<p>more text</p>
</div>
</div>
CSS code:
body {
width: 100%
margin: auto;
background-color: #f7f7f7;
}
.header {
background: #FFFFFF;
position: fixed;
top: 0;
width: 100%
}
.toolbar a {
font-family: 'Raleway', sans-serif;
color: #5a5a5a;
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
}
.toolbar li{
display: inline;
}
.content {
margin-top:100px;
z-index:10;
}

Answer 1

<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!--Tabs Here-->
</div>
</div>
You have to use a Bootstrap feature (navbar) as opposed making the div a fixed element at the top of the page.