読者です 読者をやめる 読者になる 読者になる

世界のことを知りたい

読書習慣を付けたい。…マンガも本だよね?…バナナはおやつだよね?

CSS3 の「background-size」プロパティがものすごく便利

Web・インターネット

このサイトのデザインを変えたのですが、その時に最近流行している「背景画像の設定」をしてみました。背景画像を付けるには CSS で body タグの「background」プロパティを弄れば良いのですが、画像ファイルを指定しただけではこんな感じになってしまいます。

f:id:arityk:20160103202034j:plain

ウィンドウサイズに合わせて背景画像が拡大縮小されると良さそうですね。どうしたものかと検索してみたら、CSS3 で追加された「background-size」というプロパティを使えば良いことが分かりました。

背景画像が常にウィンドウ全体を満たすようにするには、background-size に "cover" と設定します。

f:id:arityk:20160103202041j:plain

おお、簡単です。JavaScript で画像サイズを変更させる必要があるのかと思っていましたが、CSS3 ですごく簡単になりました。これは知っておいた方が良いプロパティですね。