今回は「background 背景のプロパティを一括指定しよう!」
についての解説になります!
こんな方に読んでほしい
- CSSを学び始めた方へ
-
background:背景画像を複数設置
の使い方について学びたい方へ - 今回はbackgroundの応用編について記事を書いております
backgroundについて
backgroundプロパティは、要素の背景色、背景画像、背景の繰り返し方法、背景の位置を設定するためのプロパティです。
以下のようなプロパティがあげられます。
background複数画像の指定方法について
backgroundプロパティの値に、複数の背景画像をカンマで区切って指定することで、複数の背景画像を表示することができます。
backgroundは下記のように指定します。
div {
background-image: url("image1.png"), url("image2.png");
}
上記のコードでは、最初に「image1.png」が配置され、その上に「image2.png」が配置されます。
また、「background-position」、「background-size」プロパティを使用して、複数の背景画像の位置を指定することもできます。
background-position複数画像の指定方法について
background-positionプロパティは、背景画像の位置を指定するためのプロパティです。このプロパティの値は、以下の2つの値をカンマで区切って指定します。
div {
background-image: url("image1.png"), url("image2.png");
background-position: left top, right bottom;
}
上記のコードでは、最初に「image1.png」が水平方向の「left」と垂直方向「top」が指定され、左上に配置が可能です。
その上に「image2.png」が水平方向「right」と垂直方向「bottom」の右下に配置されます。
注意するポイント!
・背景画像のサイズやアスペクト比を考慮する必要があります。
・背景画像の重なり合いを考慮する必要があります。
背景画像を同じ位置に指定する場合は以下のようなコードになります。
要素の背景画像を「image1.png」と「image2.png」に設定し、それぞれを水平方向の中央に配置します。
div {
background-image: url("image1.png"), url("image2.png");
background-position: center;
}
「,カンマ」で区切りを入れずに指定することで背景画像は同じ中央に配置が可能になります。
background-size複数画像の指定方法について
background-sizeプロパティは、背景画像のサイズを指定するためのプロパティです。このプロパティの値は、以下の2つの値をカンマで区切って指定します。
- 指定できる値
- auto(初期値)
背景画像の表示サイズは変更されません
- contain
背景画像の縦横比を保ち、指定要素に収まるようサイズを調整します
- cover
背景画像の縦横比を保ち、指定要素のすべてをカバーするようサイズを調整します
- %または数値+単位の指定
背景画像のサイズを横(幅)サイズ、縦(高さ)サイズとスペースで区切って指定します
div {
background-image: url("image1.png"), url("image2.png");
background-position: left top, right bottom;
background-size: 1数値 2数値, 1数値 2数値;
}
上記もコードでは、最初に「image1.png」の、1:数値(横幅)、2:数値(縦幅)に設定され、
その上に「image2.png」の1:数値(横幅)、2:数値(縦幅)に設されます。
注意するポイント!
数値+単位で指定する際には縦横比は必ず守りましょう。
例) ①画像サイズ 480×320 = 3:2の割合 ②画像サイズ 480×360 = 4:3の割
background-repeat複数画像の指定方法について
background-repeatプロパティは、背景画像の繰り返し方法を指定するためのプロパティです。このプロパティの値は、以下の2つの値をカンマで区切って指定します。
- 指定できる値
- repeat
初期値になります:背景画像が繰り返し表示され、指定の要素からはみ出た部分は表示しません
- repeat-x
背景画像がX方向「水平」に繰り返し表示されます
- repeat-y
背景画像がY方向「垂直」に繰り返し表示されます
- space
「repeat」と違い、指定要素からはみ出ないように間隔を調整し表示されます
- round
「repeat」と違い、指定要素からはみ出ないように画像サイズを調整し表示されます
- no-repeat
背景画像を一回だけ表示してリピートはしません
div {
background-image: url("image1.png"), url("image2.png");
background-position: left top, right bottom;
background-size: 1数値 2数値, 1数値 2数値;
background-repeat: repeat-y, no-repeat;
}
上記のコードでは、最初に「image1.png」がy方向(垂直方向)に繰り返され、
その上に「image2.png」が「no-repeat」水平方向、垂直方向どちらも繰り返さないように指定しています。
まとめ
今回はこれで以上です。
- POINT
-
background
背景画像を複数設置について解説です。 - 複数の背景画像をカンマで区切って指定することで、複数の背景画像を表示することができます。
- 最初に「image1.png」が配置され、その上に「image2.png」が配置されます。
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事