How to set a fixed background with CSS?

advertisements

I've set a fixed background on my website but it's not quite staying fixed when zooming in and out.

This is the site I want to replicate the background from:

http://triangl.com/

Zooming in and out keeps the background completely fixed.

Please see mine:

http://zoeyplayground-com.zoeysite.com/

Zooming in and out will behave differently.

My code is below. This will only set the background on the home page:

jQuery(document).ready(function(){

  if (top.location.pathname === '/')
  {
     jQuery("body").addClass("bodybackground");
  }

});

.bodybackground {
    background: url('/media/import/background.jpg') no-repeat center center fixed;
}

Could anybody inform me on what could be causing this? Thank you very much for any help.


you need to add background-size: cover;

.bodybackground {
    background: url('/media/import/background.jpg') no-repeat center center fixed;
    background-size: cover;
}