画面いっぱいに背景画像を貼り付けてみたいんだけどやり方がわからないんだよね
うまいこと表示できなかったり理想と違うし困っちゃう
確かに難しいよね💦
では今回は背景に関するプロパティを中心に、ヘッダーやメインビジュアルなどでよく見る背景画像の設定方法を解説していきます
頑張りましょう！
1.background-color
まずは以前の復習にはなりますが要素に背景色を設定してみましょう。
div{
background-color: pink; /*div要素の背景色をピンクに*/
}こんにちは
background-colorプロパティを使えばよかったですね。
それほど問題ではないかと思います。
2.background-image
この画像を例にみていきます。
熱海の写真です
いいですねぇ
Webページを作る際に「背景いっぱいに画像を使いたいなー」と思う機会が多々あると思います。
そんな時はbackground-imageプロパティを使います。
値にはurl()としカッコの中に画像のパスをいれます。
セレクター{
background-image: url(ファイルを指定);
}
話を戻して早速作成してみましょう！
<div>こんにちは</div>div{
background-image: url(../images/image-1.png);
}背景がチラッと出てきた
イメージとなんか違う
これは高さを指定していないから中身のテキストの高さになってるんだよ
なのでとりあえず適当に高さを設定してしまいましょう。
600pxとかにしてみます。
div{
background-image: url(../images/image-1.png);
height: 600px;
}背景いっぱいに画像が入りましたがまだ違和感がありますね
下から雲がはみ出てる！
海の中から雲だなんて素敵
などと訳のわからないことはさておき、そのはみ出しているのをコントロールするのが次に説明するbackground-repeatプロパティです。
3.background-repeat
background-repeatプロパティは背景画像を繰り返すか否かを指定するプロパティです。
セレクター{
background-repeat: 値;
}また値には以下のものが入ります。
| 値 | 設定後 |
|---|---|
| repeat | 繰り返す(初期値) |
| no-repeat | 繰り返さない |
| repeat-x | x軸方向に繰り返す |
| repeat-y | y軸方向に繰り返す |
何も指定しないと初期値である”repeat“になり、設定された幅や高さに届くまで画像が繰り返されます。
それぞれの値の実例です
説明のため画像を小さくしています
クリックで値が変わります。
話を先ほどの例の画像で説明すると、背景の高さ(ここではdivの高さ)＞画像の高さになっていたため、足りなかった分画像が繰り返されたということになります。
それを直すためにはbackground-repeatプロパティを使い、値を“no-repeat”とします。
div{
background-image: url(../images/image-1.png);
height: 600px;
background-repeat: no-repeat; /* 繰り返さない */
}今度は繰り返す事なく背景画像を設定する事ができました。
画像を繰り返さなくはできたけど、他の値を使う機会ってあるの？
もちろんあるよ！
参考までに他の値はこのようなシンプルな背景をつくる際などに使われます。
クリックで値が変わります。
いちいち画像を加工しなくて良いから楽だ
一枚の画像を使いたいのであればbackground-repeatは”no-repeat”に、何枚も使うような背景なら”repeat”を指定し使い分けるのがベターです。
4.background-size
background-sizeプロパティは読んでそのまま背景のサイズを設定するプロパティです。
セレクター{
background-size: 値;
}値には以下のものがあります。
| 値 | 設定後 |
|---|---|
| 数値(pxや%) | 繰り返す(初期値) |
| cover | 画像の縦横比を保持し、表示領域全体に広がる |
| contain | 画像の縦横比を保持したまま、画像の全体が表示される |
例を出しながら順番に見ていきましょう
4-1.数字で指定する
div{
height: 200px; /*背景画像が入る中身そのもののサイズ*/
border: 1px solid #ddd; /*枠線*/
background-image: url(../images/image-1.png);
background-repeat: no-repeat; /*繰り返さない*/
background-size: 250px; /*幅を250pxに指定*/
}値を1つ指定すると幅を指定することになり、高さは自動的に”auto”になります。
値を2つ指定すると幅と高さを設定する事ができます。
順番は1.幅、2.高さです
div{
height: 200px; /*背景画像が入る中身そのもののサイズ*/
border: 1px solid #ddd; /*枠線*/
background-image: url(../images/image-1.png);
background-repeat: no-repeat; /*繰り返さない*/
background-size: 250px 200px; /*幅を250px,高さを200pxに指定*/
}ちょっと窮屈な感じがしますね
4-2.cover
値を”cover”にしてみます。
“cover”は画像の縦横比を保持したまま、指定した表示領域全体に広がります。
div{
height: 300px; /*背景画像が入る中身そのもののサイズ*/
border: 1px solid #ddd; /*枠線*/
background-image: url(../images/image-1.png);
background-repeat: no-repeat; /*繰り返さない*/
background-size: cover; /*サイズをcoverにする*/
}もうひとつ見てみましょう。今度は高さを500pxに指定します。
div{
height: 500px; /*背景画像が入る中身そのもののサイズ*/
border: 1px solid #ddd; /*枠線*/
background-image: url(../images/image-1.png);
background-repeat: no-repeat; /*繰り返さない*/
background-size: cover; /*サイズをcoverにする*/
}両方とも画像の縦横比を保ったまま画面いっぱいに広がりました。
4-3.contain
最後は”contain”です。
“contain”は画像の縦横比を保持したまま、画像の全体が表示されます。
“cover”の時と同じ様に高さ300pxと500pxの場合を見てみましょう
div{
height: 300px; /*背景画像が入る中身そのもののサイズ*/
border: 1px solid #ddd; /*枠線*/
background-image: url(../images/image-1.png);
background-repeat: no-repeat; /*繰り返さない*/
background-size: contain; /*サイズをcontainにする*/
}div{
height: 500px; /*背景画像が入る中身そのもののサイズ*/
border: 1px solid #ddd; /*枠線*/
background-image: url(../images/image-1.png);
background-repeat: no-repeat; /*繰り返さない*/
background-size: contain; /*サイズをcontainにする*/
}こちらは高さを指定しても画面を埋め尽してはいませんが画像の全体が表示されています。
“cover”と”contain”の違いは画面全体を覆うか覆わないかの違いがあります
5.background-position
background-positionプロパティは背景画像の開始位置を指定するプロパティです。
背景を設定した時に以下の様に任意の位置でないとします。
background-positionを指定すると…
こんな感じで位置をずらす事ができます。
値には”px“や”%“などが入ったりキーワードで指定します。
セレクター{
background-position: 値;
}
こちらも順番に見てみましょう
5-1.数値で指定
div{
height: 300px;
background-image: url(../images/image-1.png);
background-repeat: no-repeat; /*繰り返さない*/
background-position: 60% 65%; /*横方向に60%,縦方向に65%ずらす*/
}初期位置から横方向に60%,縦方向に65%ずらしています。
街も含める事ができました。
また両方向に設定することもでき、1つ目が横方向、2つ目が縦方向になります。
セレクター{
background-position: 横方向 縦方向;
}5-2.方向を示すワードで指定
今度は値に数値を使うのではなく”left“や”top“といった方向を示すワードや”center“を使用して位置を指定します。
セレクター{
background-position: 値; /*値には方向を示すワード,centerが入る*/
}またこちらも以下の例のように複数の値を指定する事ができます。
セレクター{
background-position: top left; /*左上を基準にする*/
}例を示しましたので基準を変えて画面サイズを動かすとどうなるか遊んでみてください
ちなみに右下のアイコンをドラッグしながら動かすとサイズが変わります
ボタンをクリックすると画像の基準の位置が変わります。
右下のアイコンをドラッグしながら動かすと画像サイズが変わります。
背景画像の位置(background-position)を指定すると画面サイズを変える時の起点にもなります。
6.background
ここまで長々書いてまいりましたが今まで説明してきたものをまとめて書けるプロパティがbackgroundプロパティです。
ショートハンドって本当に便利ですよね
セレクター{
background: 値;
}div{
background: url(../images/image-1.png) no-repeat center bottom/cover;
height:300px;
}上の例では”background-image”,”background-repeat”,”background-position”,”background-size”をまとめて記述しています。
ここでbackgroundプロパティでまとめて書く際の注意点です。
“background-size”を指定する際は”background-position”も同時に指定し、”background-position”/(スラッシュ)“background-sizeの値“を書きます。
セレクター{
background: url(../images/image-1.png) center / cover;
}これさえ守れば順番はどのように書いてもOKです
7.まとめ
- background-imageプロパティは背景画像を指定するプロパティで値は”url(ファイルの場所を指定する)”を書く
- background-repeatプロパティは背景画像を繰り返すか否かを指定するプロパティ
- repeat…繰り返す
- no-repeat…繰り返さない
- repeat-x…x方向に繰り返す
- repeat-y…y方向に繰り返す
- background-sizeプロパティは背景画像の大きさを指定するプロパティ
- cover…画像の縦横比を保持したまま、指定した表示領域全体に広がる
- contain…画像の縦横比を保持したまま、画像の全体が表示される
- background-positionは背景画像の開始位置を指定するプロパティ
- 数値…%やpxで指定
- 方向を示すキーワード
- center
- 背景画像の位置(background-position)を指定すると画面サイズを変える時の起点にもなる
- backgroundプロパティを使えば上記のプロパティをまとめて指定できる
- “background-size”を指定するならば”background-position”も同時に指定する
- またその際は”background-position”/(スラッシュ)“background-size”とする
div{
background: url(../images/image-1.png) no-repeat center bottom/cover;
height:300px;
}細かく説明してきましたが理屈さえわかっていれば、backgroundプロパティでまとめて書く方が見た目もすっきりしてて良いと思います
コメント