ぱそおーるCSS講座

背景関連のスタイル


背景に関連したスタイルの説明をしていきます。
要素（タグ）に直接記述する場合の記述例を記載しています。
ページ全体に使用する場合は<div style="ここの部分を抜き出してください">本文</div>

背景色を設定する
background-color : キーワード、色指定;

この属性は色々な要素の背景色を設定する事が出来ます。
キーワードはtransparentしか存在しません。透明色です。

記述例
<div style="background-color : yellow;">
背景色を黄色に設定

背景画像を設定する
background-image : url(ファイル名);

この属性は色々な要素の背景画像を設定する事が出来ます。
キーワードはnoneしか存在しません。指定なしになります。

記述例
<div style="background-image : url(back.gif);">
おはよう
こんにちは
こんばんは

背景画像の表示方法を設定する
background-attachment : キーワード;

キーワードは２種類です。
  1. scroll : 画像を固定しない（デフォルト）
  2. fixed : 画像を固定する
この属性はbackground-imageと併用しないと効果がありません




背景画像の並び方を設定する
background-repeat : キーワード;

キーワードは４種類です。
  1. repeat : 画像をタイル状にして繰り返し表示（デフォルト）
  2. repeat-x : 画像を水平方向に繰り返して表示
  3. repeat-y : 画像を垂直方向に繰り返して表示
  4. no-repeat : 画像を繰り返さずに一つだけ表示
この属性はbackground-imageと併用しないと効果がありません

repeat指定

repat-x指定

repeat-y指定

no-repeat指定


記述例
<body style="background-image : url(sample.gif);background-repeat : repeat-y;">

背景画像の表示位置を設定する
background-position : キーワード、数値指定、%指定; （水平、垂直位置が同じ設定）
background-position : 20px 40px; （水平位置と垂直位置を設定）

この属性はbackground-imageと併用しないと効果がありません
この属性はbackground-repeatと併用しないと効果がありません（通常はno-repeat）

キーワードは５種類です。
  1. left : 背景画像を左寄せ
  2. center : 背景画像を中央寄せ
  3. right : 背景画像を右寄せ
  4. top : 背景画像を上寄せ
  5. bottom : 背景画像を下寄せ
background-position : 20px 10px;

background-position : 30px;

水平位置、垂直位置を個別に設定
background-position-x : キーワード、数値指定、%指定;
background-position-y : キーワード、数値指定、%指定;

background-position-x : 20%;

background-position-y : 20%;

背景画像をまとめて設定する
background : 色 画像 表示方法 並び方 表示位置;

background-color : 省略可能
background-image : 省略可能
background-attachment : 省略可能
background-repeat : 省略可能
background-position : 省略可能
左から上の順で設定していきます。キーワード間（数値指定など）は半角スペースで区切ります

記述例
<div style="background : red url(sample.gif) scroll repeat-y 0p;">
HOMEへ