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
Copyright © スタイルシート(CSS)レイアウト. All Rights Reserved.