ホーム > HTML/CSS > 背景

CSS -背景-

コンテンツを表示する領域の背景には、色や背景画像を指定することができます。

背景色

背景色を指定するには、background-colorプロパティを使用します。
色の値の指定は「 フォントの色」の指定と同じです。

使用例

background-color : #d3d3d3;

ウインドウの表示領域すべてに色をつけたい場合は、body要素にbackbround-colorプロパティを指定します。

背景画像

コンテンツを表示する領域の背景には、色や背景画像を指定することができます。

背景色を指定するには、background-imageプロパティを使用します。

背景画像の場所を示す値には、URL(パス)の形で指定します。
通常のリンクパスと同じように絶対パスと相対パスで指定ができます。

使用例

background-image : url(bg.gif);

background-imageプロパティで指定した背景画像は、通常、指定したブロック要素の範囲内で、縦方向と横方向に繰り返し 敷き詰められます。

body要素に指定してページ全体の背景を指定したり、見出しなどの特定の要素の背景を指定することも できます。

背景画像の繰り返し

background-imageプロパティで指定した背景画像の繰り返しパターンをしてする場合は、background-repeatプロパティを使用します。

使用例

background-repeat : no-repeat;

説明
repeat 要素の背景一面に背景画像を敷き詰める(デフォルト)
repeat-x 横一列方向に背景画像を敷き詰める
repeat-y 縦一列方向に背景画像を敷き詰める
no-repeat 繰り返さない

背景画像の表示位置

背景画像の表示位置は、background-positionプロパティで指定します。

値として指定できるものは、単位つきの数値、%、キーワードです。

構文

background-pisition : 左右の表示位置 上下の表示位置;

値は、基本的に左右・上下表示位置の2つを組み合わせて指定します。

左右の表示に指定できる値
説明
right 背景画像の右寄せのキーワード
left 背景画像の左寄せのキーワード
center 背景画像の中央寄せのキーワード
%(割合) 表示範囲に大きさに対する割合で位置を表示
数値(px等) 表示範囲の左からの表示位置
上下の表示に指定できる値
説明
top 背景画像の上寄せのキーワード
bottom 背景画像の下寄せのキーワード
center 背景画像の中央寄せのキーワード
%(割合) 表示範囲に大きさに対する割合で位置を表示
数値(px等) 表示範囲の左からの表示位置

%と単位つきの数値を使って値を記述する場合、基準となる位置は背景画像を敷く要素の左上からの割合や数値となります。

キーワードと割合や数値を組み合わすことはできません。

Copyright © 2018   MitoRoid  All Rights Reserved.