0

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?

Meghdad Hadidi
  • 1,093
  • 13
  • 28

1 Answers1

3

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

Community
  • 1
  • 1
Felipe Sabino
  • 17,825
  • 6
  • 78
  • 112
  • but I saw an example like this, that did it. www.australia.com this site background size not change while the page size changing. – Meghdad Hadidi Mar 07 '12 at 11:47
  • 1
    So I am pretty sure it was using some other JS library together with Modernizr and may be you missed to notice – Felipe Sabino Mar 07 '12 at 11:52
  • Please help me to find the library that do this – Meghdad Hadidi Mar 07 '12 at 11:54
  • 1
    Do you have the URL for this example? – Felipe Sabino Mar 07 '12 at 11:58
  • uow! sorry but this site has tons of JS besides `Modernizr` and it's gonna take too much to dive into that. All I can say is that it is currently using an image as background, you can see it as the first element inside the `body` tag as the page background, which is something you can do if the `background-size` property is not available. – Felipe Sabino Mar 07 '12 at 13:55
  • Thank you my friend, I know that this site uses a background image and I know that it has tons of JS beside Modernizr. But I want to know the way to do same things. – Meghdad Hadidi Mar 12 '12 at 11:06