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

CSS

一回覚えてしまえば気にする必要はないと思いますが、最初この状態になった時にしばらく調べていたのでメモしておこうと思います。

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%;
}

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

というわけで、background-sizeのお話でした。