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

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

背景色と背景画像の設定

背景色

背景を青くする


BODY{
background-color : blue;
}

▲このpageの上へ|目次

背景画像

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


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

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


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

▲このpageの上へ|目次

画像の位置

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


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;
}

▲このpageの上へ|目次

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


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;
}

▲このpageの上へ|目次

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


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;
}

▲このpageの上へ|目次

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


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;
}

▲このpageの上へ|目次

Home