title: Fixed background image without a set height
body: <p>I have a div element that must have a background image that is fixed so when you scroll the content rolls over it. My issue is that I have to set a height for that specific div element in order to see it. That is because there isn't any content in that div.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#top-banner{
      background-image: url(../img/grey.jpg);
      background-attachment:fixed;
      height:700px;
      background-repeat: no-repeat;
      background-size: 100% auto;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row" &gt;
          &lt;div class="col-sm-12" id="top-banner"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-12 text-center" &gt;
              &lt;h1 class="band-name"&gt;Lorem Ipsum&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This gives me what I want for larger screens:</p>
  
  <p><a href="https://i.stack.imgur.com/N68iE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N68iE.png" alt="enter image description here"></a></p>
  
  <p>But as you shrink the browser, like you are on a phone or tablet, the height for that div pushes all the content down making it look unappealing:</p>
  
  <p><a href="https://i.stack.imgur.com/WDTea.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WDTea.png" alt="enter image description here"></a></p>
  
  <p>Is there a way to not give it a specific height so the content is not pushed down on smaller screen but still have the fixed background image?</p>
  
  <p><strong>EDIT</strong>
  Here is a fiddle to check out. <a href="http://jsfiddle.net/0xbfhwnt/" rel="nofollow noreferrer">http://jsfiddle.net/0xbfhwnt/</a></p>
  
  <p><strong>I reiterate</strong>: It looks fine at first but when you make the browser smaller the image shrinks like it is supposed to but the height of the div stays keeping the content below the image instead of flush with the background image div.</p>