Javascript: How to use modernizr to change background size to cover?

Question

I used Modernizr for changing background size to cover to be cross-browser.
I want to have a fixed background position and size, when page size changed by user with zoom-out or site loaded with different resolution. Like this site: www.australia.com

So I have imported the Modernizr.js into my HTML file:

<script type="text/javascript" src="js/modernizr.js"></script>

Then I used background-size in my style.css file like this:

background-image:url(../../images/back.png);
background-repeat:no-repeat;
background-position:top center;
background-attachment:fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

But the background is still resizable and the code not working, please tell me how can I use Modernizr in the right way?

Answer 1

from Modernizr web site

Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies

That means Modernizr is used only to check if the feature is available in the current browser, not to manipulate the DOM, or fix the CSS somehow, this is your responsibility. In that case you should use another CSS rule or JavaScript to perform the task you want based on what Modernizr told about that specific feature, like fixing for the background-size in IE