CSSを使った背景

以下背景を定義するために使われるプロパティ:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

他のスタイルプロパティと同様に、タグ/class/IDにbackgroundを割り当てることができます。

Background-color

background-colorプロパティは、要素の背景色を指定します。

div.block{
    background-color:#64a8d8;
}

css-background-1

色の指定は以下のように記述します:

  • HEX形式 – “#ff0000”
  • RGB形式 – “rgb(255,0,0)”
  • 色指定形式 – “red”

Background-image

background-imageプロパティは要素の背景として使用する画像を定義します。

div.block{
    background-image:url(image-1.jpg);
}

css-background-2

Background-repeat

デフォルトでは要素いっぱいに背景画像を繰り返そうとします。例えば用意している画像が縦横100pxで、貼り付けようとしている要素が縦横200pxだった場合、下記のように背景画像は4回繰り返して表示されることになります。

css-background-3

この動作を回避するには、background-repeatプロパティを使用します。

div.block-2{
    background-image:url(image-1.jpg);
    background-repeat: repeat-x;
}

繰り返しの指定は以下のように記述します:

  • repeat-x – 水平方向に繰り返す場合に使用
  • repeat-y – 垂直方向に繰り返す場合に使用
  • no-repeat – 画像を全く繰り返さない場合に使用

Background-attachment

background-attachmentプロパティは、画面をスクロールする際、背景画像をその位置に固定されたままにするか、スクロールに伴って移動するかどうかを設定します。

  • scroll – スクロールに伴って移動
  • fixed – 固定されて移動しない

Background-position

background-positionプロパティは、要素に応じて、背景画像の位置を定義します。デフォルトでは左上隅に置かれます。

div.block-3{
    background-image:url(image-1.jpg);
    background-repeat: no-repeat;
    background-position: 40px 40px;
}

css-background-4

値の表記順は水平方向、垂直方向の順で記載します。

値の指定は”%”での指定 (background-position: 100% 0%;)や、 位置を表すワードでの指定 (background-position: top right;)も可能です。例えば幅・高さとも100pxの要素に右下隅に設定する場合下記のように記述することができます:

background-position: right bottom;

または

background-position: 100% 100%;

または

background-position: 100px 100px;

記述の簡略化

多くのCSSプロパティを知れば、CSSファイルのサイズも大きくなりがちです。CSSファイルが大きくなればwebサイトの表示に時間がかかってしまいます。ですので、記述するコードは簡略化されたものがベターです。

以下backgroundプロパティの簡略した記述様式を推奨します。

背景色を定義する場合:

div.block-3{
    background:#64a8d8;
}

背景画像(画像データ、位置、繰り返し、スクロールの固定)について定義する場合

div.block-3{
    background:url(image-1.jpg) top left no-repeat scroll;
}

定義内訳:

css-background-5


Comments are closed.