×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。

スタイルシート(CSS)レイアウト

Home > 編集方法 > 簡易スタイルシートリファレンス目次 > 背景色と背景画像の設定

背景色と背景画像の設定

背景色

背景を青くする|カラーコード

body{ background-color: blue; }

Home | 編集方法TOP | 簡易スタイルシートリファレンス目次 | Page Top

背景画像

背景に画像などを使用する

body{ background-image: url(ファイル名.gif); }

フォルダに保存してある場合

body{ background-image: url(フォルダ名/ファイル名.gif); }

Home | 編集方法TOP | 簡易スタイルシートリファレンス目次 | Page Top

画像の位置

画像を左上に表示する場合

body{
  background-image: url(フォルダ名/ファイル名.gif);
  background-repeat: no-repeat;
  background-position: left top;
}

画像を右上に表示する場合

body{
  background-image: url(フォルダ名/ファイル名.gif);
  background-repeat: no-repeat;
  background-position: right top;
}

画像を左下に表示する場合

body{
  background-image: url(フォルダ名/ファイル名.gif);
  background-repeat: no-repeat;
  background-position: left bottom;
}

画像を右下に表示する場合

body{
  background-image: url(フォルダ名/ファイル名.gif);
  background-repeat: no-repeat;
  background-position: right bottom;
}

Home | 編集方法TOP | 簡易スタイルシートリファレンス目次 | Page Top

画像を左上に固定する場合

body{
  background-image: url(フォルダ名/ファイル名.gif);
  background-repeat: no-repeat;
  background-position: left top;
  background-attachment: fixed;
}

画像を右上に固定する場合

body{
  background-image: url(フォルダ名/ファイル名.gif);
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

画像を左下に固定する場合

body{
  background-image: url(フォルダ名/ファイル名.gif);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-attachment: fixed;
}

画像を右下に固定する場合

body{
  background-image: url(フォルダ名/ファイル名.gif);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-attachment: fixed;
}

Home | 編集方法TOP | 簡易スタイルシートリファレンス目次 | Page Top

画像を左側に繰り返す場合(垂直方向)

body{
  background-image: url(フォルダ名/ファイル名.gif);
  background-repeat: repeat-y;
  background-position: left center;
}

画像を右側に繰り返す場合(垂直方向)

body{
  background-image: url(フォルダ名/ファイル名.gif);
  background-repeat: repeat-y;
  background-position: right center;
}

Home | 編集方法TOP | 簡易スタイルシートリファレンス目次 | Page Top

画像を画面の上の方だけ繰り返す場合(水平方向)

body{
  background-image: url(フォルダ名/ファイル名.gif);
  background-repeat: repeat-x;
  background-position: center top;
}

画像を画面の下の方だけ繰り返す場合(水平方向)

body{
  background-image: url(フォルダ名/ファイル名.gif);
  background-repeat: repeat-x;
  background-position: center bottom;
}

Home | 編集方法TOP | 簡易スタイルシートリファレンス目次 | Page Top

無料サーバー
お薦めサーバー
ネットショップ
CMSブログソフトウェア

サイトマップ