androidの標準ブラウザで背景画像が表示されない

Question

androidの標準ブラウザで背景画像が表示されません。
下記のように書きましたが、標準ブラウザでは表示されませんでした…
chromeでは表示されました。
お力添えをお願い致します。

[html]

<section class="l-mainvisual"> </section>

[css]
.l-mainvisual{
height: 375px;
background: url(assets/img/top/mv.jpg) center no-repeat;
-webkit-background-size: cover;/* Safari,Google Chrome用 /
-moz-background-size: cover; / Firefox用 /
-o-background-size: cover; / Opera用 */
background-size: cover;
}

※追記(androidのバージョンについて）
バージョンは4.1.2です。
上記にもあるように標準ブラウザでのみ表示されません。
バージョン5.0では標準ブラウザでもchromeでも表示が確認できました。
なかなかandroidの標準ブラウザではバグが多いようですね…。

Comments

[k_fujimoto]

htmlのコードも記述してあると回答しやすくなると思います。

[aki0923f]

Android OSのバージョンはいくつでしょうか？

Answer 1

background-sizeプロパティはandroid4.3以下だと未サポートの可能性が高いですね。
http://caniuse.com/#search=background-size

jQueryを利用して対応させることができないですかね。
参考URL：[jQuery]IE8でCSS3のbackground-size:coverを扱う

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://rawgit.com/kaliber5/jquery-backgroundcover/master/src/jquery.backgroundcover.js"></script>
<section class="l-mainvisual">
</section>

.l-mainvisual{ 
    height: 375px; 
    background: url(http://androidcentral.us/wp-content/uploads/2014/06/low-poly-texture-18.png?541271) center no-repeat;
}

$(function(){
 $('.l-mainvisual').backgroundcover({
 safearea: "10%,50%,10%,10%"
 });
});

Answer 2

以前似たような状態で対処した経験からだと、CSSの短縮プロパティが原因だったか、未指定プロパティが妙なデフォルト値で反映してしまうんだったかした気がします。

.l-mainvisual{
    background: url(assets/img/top/mv.jpg) center no-repeat;
} 

  ↓↓↓↓↓

.l-mainvisual{
    background-image: url("assets/img/top/mv.jpg");
    background-position: center center;
    background-repeat: no-repeat;
} 

あとこれも駄目だった気がします。画像の指定はあるけれど画像が見つからない…みたいな、このまま「l-mainvisual」に後から画像を指定しても反映しないとか…。

.l-mainvisual{
    background-image: url("");
} 

Android標準ブラウザはバグの宝庫です、もう諦めました。

Comments

[takuya_lotus]

回答いただきありがとうございます。
残念ながらこの方法ではいけませんでした…