背景に関するスタイル

CSSの背景プロパティは、要素の背景に色や画像を設定してデザインを整えるためのものです。ページの雰囲気を大きく変える重要なスタイルです。

background-color

以下の記述は、背景を赤色にすることができます。

background-color:#ff0000;

colorの値

値には、「色コード」または「色名」を指定します。カラーコードは、冒頭にシャープ「#」をつけて記述します。▶︎ WEB色見本：https://www.colordic.org/

背景の色については、body全体だけでなく、ボックスごとに指定することができます。

transparent(トランスペアレント)

透明色を指定します。

background-color: transparent;

linear-gradient

CSSでは、グラデーション背景 を作る関数を用いることができます。2色以上の色を 直線的（linear）に変化させながら表示できます。方向、色と色の間は、カンマで区切ります。

background: linear-gradient(方向, 色1, 色2, ...);

グラデーション方向の指定

方向を指定しない場合、上から下（垂直方向）がデフォルト です。水平方向に流す場合は (to right) と指定すると、左から右へ色が流れ、(to left)と指定すると、右から左へ色が流れます。方向の指定の最後は、カンマまで仕切ります。さらに、角度を指定することで、細かい設定も可能になっています。

グラデーション色の変化

2色以上を、カンマまで区切って指定します。例えば、red,blueは、赤から青へ変化していく指定になります。

& .s000{background:linear-gradient(red,blue);}
& .s001{background:linear-gradient(to top,red,blue);}
& .s002{background:linear-gradient(to right,red,blue);}
& .s003{background:linear-gradient(to left,red,blue);}
& .s004{background:linear-gradient(45deg,red,blue)}

▶︎ テキストをグラデーションにする(後編)

background-image

背景イメージの指定
要素の背景に敷き詰めるイメージを指定します。指定したイメージは、背景全体にタイル状に繰り返して表示されます。値には「url(画像ファイルのパス)」を指定します。画像ファイルへのパスは正確に指定する必要があります。例えば、HTMLファイルが「マイドキュメント」にあるのに、画像が「デスクトップ」にある場合は、正しく表示されません。

background-image: url("画像ファイルのパス");

基本的なファイルの配置
CSSフォルダーとimagesフォルダーを別に配置した場合、画像のパスは上の階層を指定することになります。

上記のようなデフォルト配置の場合の背景画像へのパスは、以下のようになります。

background-image:url("../images/bg.jpg");

background-repeat

背景イメージの繰り返し：背景イメージをした後に、繰り返し方法を指定することができます。

background-repeat: 値;

repeatの値

background-position

background-position: 水平方向の値 垂直方向の値;

背景画像の表示開始位置を指定することができます。水平方向(横軸X)、垂直方向(縦軸Y)のキーワード、または数値+単位で指定することができます。【注】要素にそれなりの高さが必要ですので、要素内にコンテンツがない場合は正しく表示されません。コンテンツがない場合は、高さ(height)に、仮のサイズを設定して確認します。

positionの値

方向位置を1つだけ指定した場合は、left center と同じになります。

background-position: left; /* left center と同じ */

横位置を指定した場合、縦位置は自動でcenter(中央配置)になります。背景イメージは、全体ボディだけでなく、タグやセクションにも、設定することができます。例えば、見出しの背景や、リストの先頭のアイコンとしても、指定することができます。その際は、余白やポジションを使って、配置を考慮します。

backgroundショートハンド

上記のbackgroundに関するショートハンドを使う場合は、以下になります。

/*------画像のパス・繰り返さない・中央配置・全体配置・固定する--------------*/

background: url(画像のパス) no-repeat center center /cover fixed;

background-attachment

background-attachment: 値;

背景画像がスクロールに対してどのように動くかを指定するプロパティです。背景画像の固定やスクロールの挙動をコントロールすることができます。

attachmentの値

attachmentの補足

attachmentは、PCによるブラウザでは、問題なく動作しますが、スマホ・タブレットのブラウザでは、多くの場合、fixedは、効かないようです。理由は、パフォーマンスやスクロール処理の制限があるためだそうです。特に iOS Safari や Android Chrome では、固定背景はうまく描画されないことが多いです。

背景を固定する
スマホやタブレットにも対応させる背景固定の手法は、後編CSSを参照ください。

パララックス効果とは
スクロールに応じて背景や要素が異なる速度で動く演出です。これにより、奥行き感や立体感をウェブページ上で表現できます。▶︎後編のCSSを参照ください。