スタイルシート｜背景に関する指定｜たったこれだけタグ講座

Loading

スポンサードリンク

このページでは、初心者でも比較的使いやすいものだけを抜粋しています。また、スタイルシートの指定に関しては「外部CSS」に記述しているものとします。その他の記述方法は「スタイルシートの定義方法」を参照して下さい。

  1. 背景色を指定する/background-color
  2. 背景画像を指定する/background-image
  3. 繰り返し/background-repeat
  4. 背景画像の位置/background-position
  5. 背景画像の固定/background-attachment

背景色を指定する/background-color

ページ全体、テーブル、セル、ボックス、<h1>等すべてのタグに使えます。

ページ全体（壁紙）の指定

背景を #ffdfef (薄いピンク)に指定します。

body{ background-color: #ffdfef; }

sample

その他タグの指定

次に見出しタグ<h1>に指定します

h1{ background-color: #ffdfef; }

見出しタグ<h1>

背景画像を指定する/background-image

背景に写真及び画像を使う場合です。ココではsample.gifという画像ファイルがあったと仮定して説明します。

body{background-image: url(sample.gif);}

sample

background-image:url(ファイル名.gif);、もしくは画像用のフォルダに保存していればbackground-image:url(フォルダ名/ファイル名.gif);と指定します。

上記の場合、画像は縦横に繰り返し表示されてます。以下では、画像の固定について説明します。

繰り返し/background-repeat

垂直方向に繰り返す/background-repeat: repeat-y

body{
background-image: url(sample.gif);
background-repeat: repeat-y;
}

sample

水平方向に繰り返す/background-repeat: repeat-x

body{
background-image: url(sample.gif);
background-repeat: repeat-x;
}

sample

下記の表は左・中央・右/上・中央・下方向の繰り返し設定のタグ一覧です。

垂直方向の位置 タグ
左側に繰り返す background-image : url(画像のパス);
background-repeat : repeat-y;
background-position : left;
中央に繰り返す background-image : url(画像のパス);
background-repeat : repeat-y;
background-position : center;
右側に繰り返す background-image : url(画像のパス);
background-repeat : repeat-y;
background-position : right;
水平方向の位置 タグ
上側に繰り返す background-image : url(画像のパス);
background-repeat : repeat-x;
background-position : top;
中央に繰り返す background-image : url(画像のパス);
background-repeat : repeat-x;
background-position : center;
下側に繰り返す background-image : url(画像のパス);
background-repeat : repeat-x;
background-position : bottom;

背景画像の位置/background-position

画像を左側・中央・右側それぞれについて指定します。今度は繰り返しはしないので、上記説明のbackground-repeat: repeat-●;の部分はbackground-repeat: no-repeat;と指定します。

背景画像を左上に固定する

body{
background-image: url(sample.gif);
background-repeat: no-repeat;
background-position: left top; /* background-position: 0 0; */
}

sample

背景画像を左下に固定する

body{
background-image: url(sample.gif);
background-repeat: no-repeat;
background-position: left bottom; /* background-position: 0 100%; */
}

sample

下記はそれぞれのサンプルです。

画像の配置 タグ
左・上 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: left top;
もしくは
background-position: 0 0;
左・中央 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: left center;
もしくは
background-position: 0 50%;
左・下 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: left bottom;
もしくは
background-position: 0 100%;
中央・上 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: center top;
もしくは
background-position: 50% 0;
中央・中央 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: center center;
もしくは
background-position: 50% 50%;
中央・下 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: center bottom;
もしくは
background-position: 50% 100%;
右・上 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: right top;
もしくは
background-position: 100% 0;
右・中央 background-image: url(画像のパス);
background-repea : no-repeat;
background-position: right center;
もしくは
background-position: 100% 50%;
右・下 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: right bottom;
もしくは
background-position: 100% 100%;

キーワードによる指定の他に [px] [%] などもあり、こちらの方がより細かな設定が出来ます。

背景画像の固定/background-attachment

スクロールさせない

body{
background-image: url(sample.gif);
background-repeat: no-repeat;
background-position: right top; /* background-position: 100% 0; */
background-attachment: fixed;
}

スポンサードリンク