タグ: ウェブサイト作成

トップページ > サイト作成 > スタイルシート（CSS）の基本とプロパティの一覧 > スタイルシート（CSS）で背景色や背景画像を設定する方法

スタイルシート（CSS）で背景色や背景画像を設定する方法

[最新更新] 2022年06月25日
[初回公開] 2013年05月22日

スタイルシート（CSS）はウェブサイトの装飾やレイアウトの位置付けに利用されるプログラムの一種で、その CSS でデザイン可能な中から背景色や背景画像を設定する使い方とを実際に指定するプロパティを紹介する。

1. スタイルシート（CSS）で背景を設定するメリット

スタイルシート（CSS）で背景を設定するメリットとしては、見やすさの向上につながる。
例えば記事とメニューを一目見て認識しやすくさせるために、メニュー欄に背景色や背景画像を用いると利用者の利便性が上がる。

また、文章中に背景色を入れることでマーカーを引いたように強調させることができるため、伝えたい内容を視覚的に効果を与えることができる。

2. スタイルシートの背景に関するプロパティ

スタイルシートの背景に関するプロパティは、主に背景色と背景画像の指定の 2 つに分類される。
背景画像は利用する画像の指定や繰り返しのプロパティが個別に用意されているが、1 つにまとめて記載することも可能である。

2-1. 背景色を付ける（background-color）

スタイルシートで背景色を付ける場合はプロパティ「background-color」を次のように利用する。
{Web カラー} には #FF0000 や red といった HTML タグで色を指定する値を入力する。
また、背景色を透明にしたいときは transparent を指定する。

background-color: {Web カラー}

2-2. 背景画像を付ける（background-image）

スタイルシートで背景画像を付ける場合はプロパティ「background-image」を次のように利用する。
{画像パス} には CSS があるディレクトリから画像に対して相対パスで指定するか、http または https で始まる絶対パスを指定する。

background-image: url({画像パス})

もし画像パスが間違っていてもエラー表示等にはならず、背景が無い状態となる。

2-3. 背景画像の位置を指定する（background-position）

スタイルシートで背景画像の位置を指定する場合はプロパティ「background-position」を次のように利用する。
{横方向の画像の位置} と {縦方向の画像の位置} の間は半角スペースを入れるようにする。

background-position: {横方向の画像の位置} {縦方向の画像の位置}

横方向と縦方向の位置を指定する値は単位や割合などさまざまな形式で指定可能である。

• "px"や"pt"などの単位付きの数値
• "%"といった割合指定
• "left"、"right"、"center"、"top"、" bottom"といった明示的な指定

2-4. 背景画像を固定する（background-attachment）

スタイルシートで背景画像を固定する場合はプロパティ「background-attachment」を次のように利用する。
{画像固定の有無} には画像を固定する場合は fixed を、スクロールさせるときは scroll を指定する。
背景画像を background-image で設定して background-repeat で指定していないときは、scroll が自動的に指定される。

background-attachment: {画像固定の有無}

2-5. 背景画像の繰り返しを指定する（background-repeat）

スタイルシートで背景画像を繰り返したい場合はプロパティ「background-repeat」を次のように利用する。
{画像固定の配置} には横方向（水平）に繰り返したり、縦方向（垂直）に繰り返すことが可能である。

background-repeat: {画像の配置}

• no-repeat ： 背景画像を繰り返さず一つだけ表示
• repeat-x ： 背景画像を横方向のみに繰り返して表示
• repeat-y ： 背景画像を縦方向のみに繰り返して表示
• repeat ： 背景画像を縦横に繰り返して表示

関連記事