title: Background Cover with Fixed
body: <p>I'm trying to create a responsive, FIXED background that works on all major browsers.</p>
  
  <p>Basically I'm after the typical background:cover behavior (scales with browser size) BUT, want the background to be fixed to create a parallax effect. </p>
  
  <p>Is this even possible if so, how?</p>
  
  <p>The CSS so far WITHOUT Fixed: </p>
  
  <pre><code>#front_header {
  background: url(1.png) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }
  
  #front_header .featured {
  width: 100%;
  max-width: 950px;
  min-width: 755px;
  margin: 0 auto;
  overflow: hidden;
  }
  
  #front_header .txt {
  margin: 19.5% 0 19.5%;
  text-align:center;
  display: block;
  }
  </code></pre>
  
  <p>The Body HTML:</p>
  
  <pre><code>&lt;section id="front_header"&gt;
  &lt;div class="featured"&gt;
  &lt;div class="txt"&gt;
  &lt;h2&gt;Test&lt;/h2&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>As you can see, when you resize this, the background resizes slightly. However if I add</p>
  
  <pre><code>background-attached:fixed;
  </code></pre>
  
  <p>The background no longer resizes, only behaves like a fixed background should.</p>