前回は、border・height・overflowにつきまして記載いたしました。
どの内容も理解してしまえば、何ら難しいことは無いことだと思います。
しかしながら、borderプロパティにつきましては、指定方法が実に多く存在しており、
覚えるのは大変だと思いますので、無理に覚える必要はなく、
記載方法のみ、どういった記載方法があるのかを理解していれば良いと思います。
また、記載方法が多いという事は、それだけ使用頻度が高いともいえますので、
実際にコーディングをおこなう際は、デザインに沿ってCSSを記載するわけですが、
ウェブ上には、色々なサンプルコードが表記されていますので、
そちらを参考にしながら、記載していくのも一つの方法といえます。
それでは今回はッ、
・背景画像の指定方法
・background-repeat
上記について、記載していきます…。
ページ全体の背景だけでなく、個々のHTML要素にも適用できるbackgroundプロパティ。
画像を指定する場合、横軸（x軸）、縦軸（y軸）のpxや％で指定をおこなったりします。
また、画像自体の繰り返しの指定をうまく利用することで、表示速度や、
デザインの幅を広げることが出来ます。
さらにCSS3では、backgroundプロパティの指定方法が大幅に増え、CSS2.1よりも
はるかに便利になっています…。
しかしながら、コチラでは基本という事でCSS2.1を記載していきます。
CSS3でのbackgroundプロパティは、別記事、CSS3に記載しようと思っております。
backgroundプロパティ
backgroundは背景関連の設定を一度に指定するプロパティになります。
background-attachment、background-color、background-image、background-position、
background-repeatの各プロパティの値を半角スペースで区切って指定します。
最低限ひとつ指定すれば、ほかの値は省力可能になります。
| 背景のプロパティ種類 | 説明 |
|---|---|
| background | 背景の一括指定 |
| background-attachment | 背景画像の固定 |
| background-color | 背景色の指定 |
| background-image | 背景画像の指定 |
| background-position | 背景画像の位置指定 |
| background-repeat | 背景画像の繰り返し |
body {
background: #fff url(MK-back.jpg) repeat-y right top ;
}
body {
background-color: #fff;
background-image: url(MK-back.jpg);
background-repeat: repeat-y;
background-position: right top;
}
backgroundプロパティを指定することで、ページ全体の背景画像を
変更したり、各要素単位で背景色やアイコンなどを適用させることが出来ます。
背景色を指定する場合は、直接色の値を指定しますが、
画像を指定する場合はurl()を使用します。
body {
background-image: url(MK-back.jpg);
}
background-repeatには、背景画像の繰り返し方法を指定します。
何も指定しなければ、縦横（x,y)の両方向に繰り返されるrepeatとなります。
body {
background-image: url(MK-back.jpg);
background-repeat: repeat-y;
}
| 指定する値 | 説明 |
|---|---|
| repeat | 縦横（x,y)の両方向に繰り返し |
| repeat-x | 水平（横方向）に繰り返し |
| repeat-y | 垂直（縦方向）に繰り返し |
| no-repeat | ひとつだけ表示で繰り返さない |
background-positionには、背景画像の位置を指定します。
何も指定しなければ、左上端の表示になります。
body {
background-image: url(MK-back.jpg);
background-repeat: repeat-y;
background-position: right top;
}
| キーワード（横位置:x） | left / center / right |
|---|---|
| キーワード（縦位置:y） | top / center / bottom |
| pxで設定 | （例）15px 20px |
| %で設定 | （例）20% 15% |
background-attachmentには、背景画像のスクロール方法を指定します。
何も指定しなければ、文章のスクロールと一緒にスクロールする（scroll）になります。
body {
background-image: url(MK-back.jpg);
background-attachment: fixed;
}
| 指定する値 | 説明 |
|---|---|
| scroll | 背景画像を固定せず、一緒にスクロールさせる |
| fixed | 背景画像を固定し、スクロールさせない |
繰り返しを指定するbackground-repeatプロパティは、繰り返す方向を
縦または横のみに制限することが出来ます。
よく使われるテクニックとして、縦長、もしくは横長の画像を用い、
それを一方向に繰り返し表示する方法がつかわれます。
グラデーションやテクスチャパターンなど、使い方次第で、
さまざまなデザイン方法が可能です。
上記のサンプル画像を↓repeat-xに指定した場合
See the Pen
gObVwmZ by masakado (@kadokado354)
on CodePen.
上記のサンプル画像を↓repeat指定でbody要素に背景で表示
See the Pen
zYxgKwZ by masakado (@kadokado354)
on CodePen.
今回記載いたしましたCSSでの背景の設定方法…。
サイト制作の現場でも、たびたび使用するテクニックが盛り沢山ですね。
また、重要ポイントは、今回はあえてすべて！！
と申しますのは、実は今回はCSS2.1での指定方法を記載いたしましたが、
CSS3では、さらに便利で、表現の幅が広い背景画像の設定方法がございます。
しかしながら、今回記載いたしました2.1の記載方法をしっかりと理解していないと、
CSS3では、ここから指定方法が複雑になってきます。
なので、実際に色々試しながら、じっくりと自分のスキルへと定着させることが、
サイト制作には欠かせない要素になってきます…。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
- 投稿タグ
- css, background
