CSSで背景画像を要素内めいっぱいに広げる方法

公開: 2014-07-21 16:46
更新: 2016-04-29 06:02
夏です。
そうです夏休みです。

夏休みということでかき氷でも食べようと思いましたがかき氷機がありません。
ついでに冷蔵庫も起動しません。

そんな熱さを吹き飛ばすにはやはりCSSが効果的。
今日は背景を設定してみましょう。



普通に設定するとこんな感じ
コードはこんな感じ
.bg {
        background-image: url('cat.jpg');
}



1.背景をめいっぱい広げる

隙間なく広げたい場合はこうです。
.bg {
        background-image: url('cat.jpg');
        background-size: cover;
        background-position: center center;
}
background-size: coverでめいっぱい広げてくれます。
background-position: center centerで要素の中心から広げてくれます。

プロフィール画像を正方形に切り取った感じで表示したいときとかによく使いますね。


2.背景を壁にくっつけたい

要素から画像をはみ出したくない場合。あんまり使わないかなー。
.bg {
        background-image: url('cat.jpg');
        background-size: contain;
        background-position: top center;
        background-repeat: no-repeat;
}
要素の縦横比と画像のそれがあってないと隙間ができてしまいますね。

background-position: top centerで上あわせ、左右中心になっています。
左上に合わせたいのであれば、top leftとすればOKです。


基本テクニックですん。
ではでは


この記事をシェア
この記事にコメントする
書き込む
あっきぃ(@appstars_aki)
Web、iOSなフリーランサーです。好きなものはお寿司です。でもお寿司は高いので普段は雑草とか拾ったドングリを食べています。お仕事や意味もなく毎月お小遣いをくれる人を探してます。

お仕事の依頼や自分で作ったアプリのレビューを希望しちゃう方はaki@appstars.jpまでご連絡ください。