Background
css type * watercolor 6
大きい画像は縮小及び一部表示にしています。画像をクリックすると背景が変わります。
背景画像を固定表示しています。
Background-image *Reset*
左・上部固定
別窓で表示 600×370
body{ background-color: #ffffff; background-image: url(画像ファイル名); background-position: left top; background-repeat: no-repeat; background-attachment: fixed; /* 背景を固定する場合 */ }
右・上部固定
別窓で表示 350×500
body{ background-color: #ffffff; background-image: url(画像ファイル名); background-position: right top; background-repeat: no-repeat; background-attachment: fixed; /* 背景を固定する場合 */ }
左・下部固定
別窓で表示 550×370
body{ background-color: #ffffff; background-image: url(画像ファイル名); background-position: right top; background-repeat: no-repeat; background-attachment: fixed; /* 背景を固定する場合 */ }
左・下部固定
別窓で表示 400×595
body{ background-color: #ffffff; background-image: url(画像ファイル名); background-position: left bottom; background-repeat: no-repeat; background-attachment: fixed; /* 背景を固定する場合 */ }
右・下部固定
別窓で表示 695×515
body{ background-color: #ffffff; background-image: url(画像ファイル名); background-position: right bottom; background-repeat: no-repeat; background-attachment: fixed; /* 背景を固定する場合 */ }
Background-image *Reset*
背景に画像を使った場合、通常は全体に繰り返し表示されますが、background-repeatプロパティを使うと、画像の繰り返し方法を設定することが出来ます。 repeat-x を指定すれば横方向に、repeat-y を指定すれば縦方向に、no-repeat を指定すれば繰り返さず、一つだけ画像を配置できます。 背景画像の位置は、background-position: 横方向 縦方向; で決められます。 指定出来るのは、 横方向 left/center/right/in(インチ)/pt(ポイント)/px(ピクセル)等、 縦方向 top/center/bottom/in(インチ)/pt(ポイント)/px(ピクセル)等、です。
Background › css type * watercolor 6