シュウ

今回は「background 背景のプロパティを一括指定しよう！」
についての解説になります！

こんな方に読んでほしい

• CSSを学び始めた方へ
• backgroundの使い方について学びたい方へ
• 今回は一括指定について記事を書いております

上の図のように、一括指定なしの場合は「imageで画像」、「positionで位置」、「repeatで繰り返し」と
3行にわたって指定をしております。
一括指定ありの場合backgroundの後にそれぞれの値をスペースで区切ることにより
指定が可能になります。
指定方法もとても簡単です

backgroundについて

基本的な記述方法としては
background値になります。

background指定方法について

今回は、主に使用されるcolor、image、repeat、position、sizeの５つにポイントを絞って
解説していきます。

backgroundは下記のように指定します。

セレクタ {
	background: colorの値 imageの値 repeatの値.....;
}

注意！
それぞれの値を入力する際にはスペースで区切って指定しましょう！

背景色と背景画像の一括指定方法

セレクタ {
	background: colorの値 imageの値;
}

<div class="inner">
	<div class="box">指定方法01</div>
</div>

.inner { /*--省略--*/ }
.box {
	/*--省略--*/
	background: #77997e url(画像パス); 　 /* 背景色、背景画像の指定 */
    background-repeat: no-repeat;　　   /*　背景画像の繰り返しの指定 */
}

注意！
colorの値、imageの値、両方の値を指定する際には、背景色(color)を先に記述し、
その後に背景画像(image)を指定します。

背景色と背景画像、繰り返しの一括指定方法

セレクタ {
	background: colorの値 imageの値 repeatの値;
}

<div class="inner">
	<div class="box">指定方法02</div>
</div>

.inner { /*--省略--*/ }
.box {
	/*--省略--*/
	
	/* 背景色、背景画像、繰り返しの指定 */
	background: #77997e url(画像パス) no-repeat;
}

背景色と背景画像、繰り返し、位置の一括指定方法

セレクタ {
	background: colorの値 imageの値 repeatの値 positionの値;
}

<div class="inner">
	<div class="box">指定方法03</div>
</div>

.inner { /*--省略--*/ }
.box {
	/*--省略--*/
	
	/* 背景色、背景画像、繰り返しの指定、位置の指定 */
	background: #77997e url(画像パス) no-repeat right bottom; 
}

背景色と背景画像、繰り返し、位置、サイズの一括指定方法

セレクタ {
	background: colorの値 imageの値 repeatの値 positionの値 / sizeの値;
}

<div class="inner">
	<div class="box">指定方法04</div>
</div>

.inner { /*--省略--*/ }
.box {
	/*--省略--*/
	
	/* 背景色、背景画像、繰り返しの指定、位置、サイズの指定 */
	background: #77997e url(画像パス) no-repeat right bottom / 100px; 
}

注意！
sizeの値は、positionの値の後に
「/」スラッシュで区切ります。

ブラウザによる問題点について

ブラウザによって、一括指定がうまく表示されない問題があります。
sizeの値が原因としてあげられております。

解決策としてsizeの値は分けて記述するようにしましょう。

<div class="inner">
	<div class="box">ブラウザによる問題点について</div>
</div>

.inner { /*--省略--*/ }
.box {
	/*--省略--*/
	
	/* 背景色、背景画像、繰り返しの指定、位置、サイズの指定 */
	background: #77997e url(画像パス) no-repeat right bottom;
	
	/* サイズの指定 */
	background-size: 100px;
}

注意！
ブラウザ表示に問題がある際にはsizeの値は分けて記述するようにしましょう！

まとめ

今回はこれで以上です。

最新記事

• 

  【CSS】グラデーション色々なパターンを解説！

  2024.05.15

• 

  【レスポンシブデザイン】アニメーションが動かない原因

  2024.05.09

• 

  【CSS】擬似要素、beforeとafterに画像を表示しサイズの調整ついて!

  2024.05.09

• 

  【CSS】display flex指定方法のまとめを解説

  2024.03.07

関連記事

< 前の記事

【CSS】background-sizeを学び背景画像のサイズを指定しよう！

次の記事 >

【HTML】sectionタグの正しい使い方を分かりやすく解説!