今回は「background 背景のプロパティを一括指定しよう!」
についての解説になります!
こんな方に読んでほしい
- CSSを学び始めた方へ
-
background
の使い方について学びたい方へ - 今回は一括指定について記事を書いております
上の図のように、一括指定なしの場合は「imageで画像」、「positionで位置」、「repeatで繰り返し」と
3行にわたって指定をしております。
一括指定ありの場合background
の後にそれぞれの値をスペースで区切ることにより
指定が可能になります。
指定方法もとても簡単です
backgroundについて
基本的な記述方法としては
background
値になります。
background指定方法について
今回は、主に使用されるcolor、image、repeat、position、sizeの5つにポイントを絞って
解説していきます。
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の値;
}
colorの値 imageの値 repeatの値
指定方法02
<div class="inner">
<div class="box">指定方法02</div>
</div>
.inner { /*--省略--*/ }
.box {
/*--省略--*/
/* 背景色、背景画像、繰り返しの指定 */
background: #77997e url(画像パス) no-repeat;
}
背景色と背景画像、繰り返し、位置の一括指定方法
セレクタ {
background: colorの値 imageの値 repeatの値 positionの値;
}
colorの値 imageの値 repeatの値 positionの値
指定方法03
<div class="inner">
<div class="box">指定方法03</div>
</div>
.inner { /*--省略--*/ }
.box {
/*--省略--*/
/* 背景色、背景画像、繰り返しの指定、位置の指定 */
background: #77997e url(画像パス) no-repeat right bottom;
}
背景色と背景画像、繰り返し、位置、サイズの一括指定方法
セレクタ {
background: colorの値 imageの値 repeatの値 positionの値 / sizeの値;
}
colorの値 imageの値 repeatの値 positionの値 / sizeの値
指定方法04
<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の値は分けて記述するようにしましょう!
まとめ
今回はこれで以上です。
- POINT
-
background
一括指定する際に使用します - それぞれの値を入力する際にはスペースで区切って指定しましょう!
- 背景色(color)を先に記述し、その後に背景画像(image)を指定します。
- sizeの値は、positionの値の後に「/」スラッシュで区切ります。
- ブラウザ表示に問題がある際にはsizeの値は分けて記述するようにしましょう!
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事