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

StackOverflow https://stackoverflow.com/questions/7743831

Question

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?
Was it helpful?

Solution

background-size is not supported in Opera Mini

OTHER TIPS

I wrote this as a quick work around:

var isOperaMini = (navigator.userAgent.indexOf('Opera Mini') > -1);
if(isOperaMini) {
    var root = document.documentElement;
    root.className += " opera-mini";
}

It add's a class "opera-mini" to the html element. Therefore you can target Opera Mini. An example below:

.icon {
    background-image: url("icon-social.svg");
    background-size: 32px;
}

html.opera-mini .icon,
html.no-svg .icon {
    background-image: url("icon-social.png");
}

See more at: http://anthonydillon.com/blog/#sthash.VUV1hIy2.dpuf

It seems things have changed. For my Opera Mini 7.5 on Android.

Modernizr.backgroundsize == true;

And it responds correctly to percentage values as well as to cover and contain.

@anthony's answer doesn't work as it's not resetting / removing the background-size property for Opera Mini. The correct way to do this is:

.class {
  -o-background-size:cover;
  -background-size:cover;
}
x:-o-prefocus, .class {
  -o-background-size:;
  background-size:;
}

The x:-o-prefocus targets just Opera browsers.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top