スタイルシート(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

無料サーバー

• FC2WEB無料ホームページ

お薦めサーバー

• さくらインターネット / 500M 月額125円から / 初めてのサーバー選びならここ
• ハッスルサーバー / 1G 月額208円から / MT&WPを使うならここで十分
• レンタルサーバー Xserver / 5G 月額1,050円から / この金額で多機能
• ファーストサーバ / 40G 月額2,940円から / 高性能&高機能サーバー
• ＣＰＩ / 50G 月額3,990円から / 高性能&高機能サーバー

ネットショップ

• Color Me Shop! pro
• ショッピングカートASP「Xcart」
• Eストアーのレンタルサーバー

CMSブログソフトウェア

• Movable Type (ムーバブル・タイプ）

Copyright © スタイルシート(CSS)レイアウト. All Rights Reserved.

サイトマップ