matt136 matt136 - 7 months ago 10
Javascript Question

How to set a fixed background with CSS?

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.

Answer

you need to add background-size: cover;

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