背景に関するプロパティ
サイト制作を行っていると要素の背景に色を付けたり、画像を張ってみたりと背景をいじることが多くなってくると思います。
ここでは、背景をいじるときに使うプロパティを紹介していきます。
この記事の目次
背景に色を付けるbackground-color
background-colorプロパティは要素の背景に色を付けることができます。 プロパティ値には付けたい色は色名での指定ができるほかに「#」の後に6桁のカラーコードを打ち込むことでも色の設定ができます。 rgbaでの指定ができるので半透明の表現も可能になります。|
1 2 3 4 5 |
h1{ background-color:red;/*色名での指定*/ background-color:#f00;/*カラーコードでの指定*/ background-color:rgba(255,0,0,0.5);/*この指定だと透明度の設定もできる*/ } |
背景に画像を張るbackground-image
background-imageを使うとセレクタで指定した要素の背景に画像を張り付けることができます。 プロパティ値には背景画像に設定したい画像までのパスを記述して使います。 ただ、HTMLとは違う言語なのでsrc属性とかは使えません。 urlの後に()を付け()の中に相対パスを使って読み込む画像までのパスを記述しましょう。 最初のうちはよく間違えるのでしっかり覚えましょう。|
1 2 3 4 5 6 7 |
h1{ background-image:url(image.jpg); } h2{ background-image:url(image1.jpg),url(image2.jpg);/*カンマ区切りで複数指定も可能*/ } |
背景画像の繰り返しの設定はbackground-repeat
背景画像の設定をしたときに要素の大きさが背景画像よりも大きい場合背景に設定した画像が繰り返し表示されてしまいます。 繰り返し表示したほうが都合のいい場合もありますが直す手段があります。 その時に使うプロパティがbackground-repeatです。 background-repeatはその名の通り背景画像の繰り返しの設定を行うプロパティで、プロパティ値には固有の値を入れて使います。| repeat | デフォルト値 背景画像を繰り返す設定 |
|---|---|
| no-repeat | 背景画像を1回だけ表示 繰り返し表示しない設定 |
| repeat-x | x軸方向(横方向)にだけ繰り返す設定 |
| repeat-y | y軸方向(縦方向)にだけ繰り返す設定 |
|
1 2 3 4 5 6 7 8 9 |
h1{ background-image:url(image.jpg); background-image:no-repeat;/*繰り返さない設定*/ } h2{ background-image:url(image1.jpg),url(image2.jpg);/*カンマ区切りで複数指定も可能*/ background-image:repeat-x,repeat-y;/*画像が複数ならカンマ区切りで複数指定も可能 読み込んだ順に指定していく*/ } |
背景画像の位置を設定するbackground-position
background-position背景画像の表示開始位置を指定するプロパティ。初期値は要素の左上が表示開始位置になっています。 表示開始位置とは背景に読み込もうとしている画像の左上の部分が始まる位置を指している。 背景画像の表示開始位置を指定する場合には、値を横方向（x軸）・縦方向（y軸）の順に半角スペースで区切って指定するルールになっている。 指定方法が複数あるので都合のいいプロパティ値を使いましょう。数値を記述して指定
細かく表示開始位置の設定がしたいときは数値を記述して動かしてあげてください ピクセルや％で表示開始位置の設定ができます。 単位をピクセルで設定したときに限りマイナスの値の設定もできます。キーワードで指定
大まかな設定で大丈夫な場合はキーワード使って指定すると簡単 キーワードはx軸用のキーワード y軸用のキーワードが用意されているのでそれを使う。| left | 要素の左端に背景画像を表示(0%と同じ) |
|---|---|
| center | 要素の中央から背景画像を表示(50%と同じ) ※ど真ん中にはならない |
| right | 要素の右端に背景画像を表示(100%と同じ) |
| top | 一番上から背景画像を表示(0%と同じ) |
|---|---|
| center | 要素の中央から背景画像を表示(50%と同じ) ※ど真ん中にはならない |
| bottom | 要素の一番下に背景画像を表示(100%と同じ) |
数値を記述して指定
細かく表示開始位置の設定がしたいときは数値を記述して動かしてあげてください ピクセルや％で表示開始位置の設定ができます。 単位をピクセルで設定したときに限りマイナスの値の設定もできます。|
1 2 3 4 5 6 7 8 9 10 11 |
h1{ background-image:url(image.jpg); background-image:no-repeat;/*繰り返さない設定*/ background-position:50px 100px;/*要素の左から50px 上から100pxの位置が表示開始位置になる*/ } h2{ background-image:url(image1.jpg),url(image2.jpg);/*カンマ区切りで複数指定も可能*/ background-image:repeat-x,repeat-y;/*画像が複数ならカンマ区切りで複数指定も可能 読み込んだ順に指定していく*/ background-position:50px 100px,center bottom;/*カンマ区切りで複数指定も可能 読み込んだ順に指定していく*/ } |
背景画像のサイズの設定をするbackground-size
background-sizeは、背景画像のサイズを指定するときに使うプロパティ。 初期値は「auto」で張り付けた画像の大きさはそのままで表示される。 pxや％で指定することができ、この場合値を２つ記述すると、それぞれ記述した順に幅(x軸)と高さ(y軸)の設定になります。 １つだけ指定した場合には、もう１つはautoと解釈されます。マイナスの値を指定することはできません。 数値を使って設定する以外にもキーワードでの設定もできる| contain | 縦横比を保ったまま、背景画像が領域に収まる表示サイズに調整されます。表示領域をはみ出した部分は非表示になります。 |
|---|---|
| cover | 縦横比を保ったまま、背景画像が領域をすべてカバーする表示サイズに調整されます。 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
h1{ background-image:url(image.jpg); background-image:no-repeat;/*繰り返さない設定*/ background-position:50px 100px;/*要素の左から50px 上から100pxの位置が表示開始位置になる*/ background-size:500px 300px;/*幅500px 高さ300pxに指定*/ } h2{ background-image:url(image1.jpg),url(image2.jpg);/*カンマ区切りで複数指定も可能*/ background-image:repeat-x,repeat-y;/*画像が複数ならカンマ区切りで複数指定も可能 読み込んだ順に指定していく*/ background-position:50px 100px,center bottom;/*カンマ区切りで複数指定も可能 読み込んだ順に指定していく*/ background-size:cover;/*縦横比を保持しつつ画面いっぱいに表示する設定*/ } |
