背景画像をフェードで切り替えしたい場合、jQueryで、タイマ使ってちょっと変更したらできるかなって
思ったけど、案外うまくいかない。
どうやら、背景画像には、フェードがきかず、何枚か画像を重ねてフェードで切り替える必要があるようだ。
ささっと出来そうもないので、すでにある
bgswitcher.js
というプラグインを使うことにした。

https://github.com/rewish/jquery-bgswitcher
すごい簡単に実装できるのだが、
タブレットで確認すると、なぜかcoverが効かず、
画像がrepeatされてしまっている。
PCでChromeのデバッガで、タブレットサイズにして、確認すると、キチンと出ている。
コードを解析すると、どうやらこのプラグインは、背景画像の上に１つ画像を置いて、
切り替えているようだ。
そのときに、今のbackgroundのCSSをコピーしてstyleで埋め込んでいる。
タブレットの場合は、そのstyleがどうやら効いていないようだ。
なので、jquery.bgswitcher.jsを改造
_copyBackgroundStylesの関数内

      for (; i < length; i++) {
        prop = 'background' + backgroundProperties[i];
        copiedStyle[prop] = this.$el.css(prop);
        prop = '-webkit-background' + backgroundProperties[i];
        copiedStyle[prop] = this.$el.css(prop);
        prop = '-moz-background' + backgroundProperties[i];
        copiedStyle[prop] = this.$el.css(prop);
        prop = '-o-background' + backgroundProperties[i];
        copiedStyle[prop] = this.$el.css(prop);
        prop = '-ms-background' + backgroundProperties[i];
        copiedStyle[prop] = this.$el.css(prop);
      }

-webkit-
-moz-
-o-
-ms-
を設定してやれば、うまくできるようになりました。