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

Question

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

2.9k views Asked by ajcw At 23 November 2024 at 00:36

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?

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

Original Q&A

There are 4 answers

Anthony Dillon On 09 January 2014 at 09:12

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

Sladex On 11 April 2014 at 11:42

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.

bperdue On 13 March 2014 at 20:18

@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.

**Divya Manian** · Accepted Answer · 2011-10-13 04:21:54

Divya Manian On 13 October 2011 at 04:21 BEST ANSWER

background-size is not supported in Opera Mini

TechQA.

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

There are 4 answers

Related Questions in OPERA

Related Questions in MODERNIZR

Related Questions in OPERA-MINI

Related Questions in CSS

Popular Questions

Popular Tags

Trending Questions