今回は背景画像のサイズを変えたい場合について！
CSSで下の写真を背景画像に設定したい。
しかし、実際に背景画像を設定できるbackground-imageで背景画像を設定してみると
1 2 3 | body{ background-image: url(images/test1.jpg);/*背景画像を指定*/ } |
「大きすぎる！写真が全部入ってないじゃん。」
ということがよくあると思う。
背景画像のサイズ変更はbackground-sizeを使う
「この画像の大きさを変えたい！」
という時に便利なのがbackground-sizeプロパティだ。
- background=背景
- size=大きさ
だから、背景の大きさを変えるプロパティと言える。
background-sizeの使い方
使い方は簡単だ。
1 | background-size: 横の長さ 縦の長さ; |
と指定するだけだ。
指定する方法は100pxと数値で指定してもいいし、％（パーセント）で指定もOK。
1 | background-size: 横の長さ; |
と横の長さだけを指定することも出来る。
この場合は、縦の長さに関してはautoとなり、自動で調整される。
先程の写真を画面の真ん中に横幅500pxの大きさで入るようにCSSで記述すると
※コードを簡単にするためにbodyタグに直接CSSを適用
1 2 3 4 5 6 7 | 【CSS】 body{ background-image: url(images/test1.jpg);/*背景画像を指定*/ background-position:center top 200px;/*背景画像の位置を調整*/ background-size:500px auto;/*背景画像の大きさを調整*/ background-repeat:no-repeat;/*背景画像の繰り返しを無しにする*/ } |
こんな感じで調整ができる。
背景画像はデフォルトだと勝手に繰り返されてしまうから、それを止めたい場合は
1 | background-repeat:no-repeat; |
を使って繰り返しをストップさせる。
また、背景画像の位置を調整したい場合は
1 | background-position |
を使って細かく調整をする。
背景画像は
- 設定の仕方
- 大きさの調整
- 繰り返しの調整
- 位置の調整
とセットで覚えた方が覚えやすく、実際にも使いやすいと思う。
【CSS】文章の背景に画像を入れたい場合はbackground-imageプロパティを使う！
