HTML・CSS・Javascriptなどのメモブログ│CODE-LIFE

WEB製作の仕事を始めたMaruのhtml・CSS・jsメモブログ。たまにExcelVBAの話もでます。

Android標準ブラウザでbackground-size: autoが機能しない

見出しの背景画像として、幅1pxの画像をリピート表示させようとしたところAndroid標準ブラウザでのみ機能しなかったお話。

 

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

 

ChromeSafariでは正常に表示されたがAndroid標準ブラウザのみ背景が表示されなかった。

 

background-sizeを backgroundプロパティにショートハンドで

 

例) background: url(image.jpg) repeat-x center center / contain rgba(0, 0, 0, 0);

 

などと書いた場合にAndroid標準ブラウザで機能しないという記事をいくつか見つけたが、今回はきちんと別で書いている。

 

 

次に考えられる要因は"サイズ指定自体が間違っている"
結論から言えばこれでした。

 

他のブラウザでは幅100%か原寸の幅1pxとして認識されていたautoがAndroid標準ブラウザでは読み込まれず、背景画像自体が一切表示されなかった。

今回は下記のように記述を変えることで対応。

 

Android標準ブラウザでも背景画像が表示される

 

もう一つやり方があるとすれば、リピートではなく幅100%にしてしまう方法

 

Android標準ブラウザでも背景画像が表示される(幅100%指定)

 

 

まぁ文字数も大して変わらないのでどちらでも良いと思いますが。