CSSで背景画像・グラデーションを使用し、sizeも指定するときの注意

Retina対応

背景画像のサイズを変えるために使うbackground-sizeですが、自分は主にRetina対応にするために使ってます。

ということでiPhone用のサイトを作ってる時に使うわけですが、iPhoneだとCSS3が結構使えるのでグラデーションもCSSで
指定します。その際にbackground-sizeを以下のように書いたりします。

#hoge {
background: url(bg.png) no-repeat left top,linear-gradient(to bottom,  rgba(255,227,48,1) 0%,rgba(255,255,255,1) 100%);
background-size: 100px 100px;
}

こうするとサンプルページの上の部分のように、グラデーションも100pxの繰り返しになります。

• サンプルページの上

background-sizeを複数書く

これの対処法としてはbackground-sizeの値を複数書きます。いままで使ってこなかったプロパティなので
複数の書き方があるのを知らなかったのでいろいろ調べ回りました。

#hoge {
background: url(bg.png) no-repeat left top,linear-gradient(to bottom,  rgba(255,227,48,1) 0%,rgba(255,255,255,1) 100%);
background-size: 100px 100px, 100% 100%;
}

このように値をカンマで区切って指定すると別々のサイズ指定が出来ます。

• サンプルページの下