今回は、スタイルシートの背景画像の指定方法について解説しています。
body要素に指定してページ全体の背景を指定したり、divや見出しなどの特定の要素の背景を指定することができます。
背景画像をどこの位置からどういった繰り返しの方法で表示させるかという細かい指定によりWebページはデザインされています。
概要
- 背景に画像を表示する
- 背景画像の繰り返しの指定
- 背景画像の表示開始位置の指定
補足・ポイント
背景に画像を表示する
スタイルシートでの背景画像の指定には、background-imageプロパティを使います。
background-imageプロパティの値は、URL（パス）の形で指定します。
パスの部分は、絶対パスや相対パスが利用できます。
スタイルシートを外部ファイルにしている場合には、HTMLファイルから見た画像のパスではなく、スタイルシートファイルからみたパスで指定します。
body {
background-image:url("../images/bg.gif");
}
背景画像の繰り返しの指定
スタイルシートでの背景画像の繰り返しの指定には、background-repeatプロパティを使います。
指定したブロックレベル要素のエリアの中で、繰り返す、繰り返さない、縦方向または横方向に繰り返すなどの設定ができます。
- repeat
- 縦横に背景画像を繰り返して表示。（デフォルト）
- no-repeat
- 繰り返さないで背景画像を一回だけ表示。
- repeat-x
- 横方向にのみ背景画像を繰り返して表示。
- repeat-y
- 縦方向にのみ背景画像を繰り返して表示。
body {
background-image: url("../images/bg.gif");
background-repeat: no-repeat;
}
背景画像の表示開始位置の指定
背景画像をどこの位置から表示させるかという指定はbackground-positionプロパティを使用します。
このプロパティの値は、キーワード、%、数値での指定ができます。
body {
background-image: url("../images/bg.gif");
background-repeat: no-repeat;
background-position: right bottom;
}
キーワードでの指定
- 横方向は、left・center・right
- 縦方向は、top・center・bottom
といった位置を表すキーワードで指定します。
背景に関する指定をまとめて行う
背景に関する指定をまとめて行うには、backgroundプロパティを使用します。
値は半角スペースで区切ります。
値の指定の順序は任意です。
指定の必要のない値は省略可能です。
body {
background: url("../images/bg.gif") no-repeat top center;
}
今回の動画で使用している背景画像を配布します。ぜひ、挑戦してみてください！
以下からダウンロードできます。
Webもデザインも未経験からフリーランス歴15年 。『仕事は自分で創りだす』をモットーに生きてきた50代。2013年⇒Webクリエイターズスクール設立。
Webデザインスクール卒業後、仕事に繋げられない迷子さん、独学、在宅、フリーランス、SNSに頼らず仕事を得たい人を対象に「学んだ事を安定的な収入にする方法」や仕事獲得につながる営業方法をお伝えしてサポートしています。
