Q:

Fixed div background image covered up by other content

When I place fixed background image in div at top of screen that has width:100% and height:100% it gets covered up by the content that is supposed to be beneath it like this:

But when I use a pixel value for the height like 100px this occurs:

I want to be able to use width:100% and height:100% to be able to get a fullscreen fixed background image that doesn't get covered up.
HTML:
<div class="background">
    <div class="hero">
      <div class="arrow_down">
        <a><i class="fa fa-angle-down"></i></a>
      </div>
    </div>
</div>

CSS:
.background {
  position:relative;
  top:0;
  overflow:hidden;
  height:100%;
  width:100%;
 }

.background .hero {
  background-image: url('../images/background.jpg');
  background-repeat:no-repeat;
  background-size:100% auto;
  background-attachment:fixed;
  background-position:center top;
  width:100%;
  height:100px;
}

A:

You should try using height: 100vh;, which is a tried and true method to solve this. I would test it on your website, but you didn't include it, so I'll post an example: 

body{margin:0px;}
.background {
  position:relative;
  top:0;
  overflow:hidden;
  height:100%;
  width:100%;
 }

.hero {
  margin:0px;
  padding:0px;
  background-image: url('http://www.funnycatpix.com/_pics/Arghhhh532.jpg');
  background-repeat:no-repeat;
  background-size:100% auto;
  background-attachment:fixed;
  background-position:center top;
  width:100%;
  height:100vh;
}
<div class="hero"></div>
<div class="background">
      <div class="arrow_down">
        <a><i class="fa fa-angle-down"></i></a>
    </div>
</div>

