Search code examples
operamodernizropera-minicss

Background size not working in Opera Mini despite Modernizr thinking it should

I am using Modernizr to detect whether browsers support the CSS3 property background-size for a mobile site I'm building.

I'm testing the site in the Opera Mini 6 Simulator on the official Opera website, and Modernizr detects that the browser supports background-size and adds the class 'backgroundsize' to the <html> element accordingly.

However when I then use the background-size property in my CSS it is not supported.

Here's the head:

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

<style>

body {
  background:url('background.gif') no-repeat 0 0 #FFF;
}

.backgroundsize body {
  -o-background-size: 100% auto;
  background-size: 100% auto;
}  

</style>

And the body content

<p>Content</p>   

<script>
if (Modernizr.backgroundsize == true) {alert("Background size is supported");}  
</script>

I am expecting the single background image to be stretched across the full width of the browser, instead it repeats; the page can be seen here - http://so.ajcw.com/mobile.htm

I guess one of five things has happened - does anyone know the reason and can offer a solution?

  1. Modernizr does not work properly and has given a false positive
  2. Opera Mini 6 incorrectly tells Modernizr it supports background-size when it doen't
  3. The simulator is not an accurate emulation and the real Opera Mini does support background-size
  4. I have written my code incorrectly
  5. Or something else?
Solution

  • background-size is not supported in Opera Mini