title: How to set a fixed background with CSS?
body: <p>I've set a fixed background on my website but it's not quite staying fixed when zooming in and out.</p>
  
  <p>This is the site I want to replicate the background from:</p>
  
  <p><a href="http://triangl.com/" rel="nofollow">http://triangl.com/</a></p>
  
  <p>Zooming in and out keeps the background completely fixed.</p>
  
  <p>Please see mine:</p>
  
  <p><a href="http://zoeyplayground-com.zoeysite.com/" rel="nofollow">http://zoeyplayground-com.zoeysite.com/</a></p>
  
  <p>Zooming in and out will behave differently.</p>
  
  <p>My code is below. This will only set the background on the home page:</p>
  
  <pre><code>jQuery(document).ready(function(){
  
    if (top.location.pathname === '/')
    {
       jQuery("body").addClass("bodybackground");
    }
  
  });
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.bodybackground { 
      background: url('/media/import/background.jpg') no-repeat center center fixed;
  }
  </code></pre>
  
  
  
  <p>Could anybody inform me on what could be causing this? Thank you very much for any help.</p>