背景画像(壁紙)

トップ > 逆引きリファレンス > 背景画像

背景画像を張るには

スタイルシートの background-image を指定します。

HTML
<style>
body { background-image: url(./image/back.png); }
</style>

背景画像を固定するには

画面をスクロールさせても、背景画像だけはスクロールしないようにするには、スタイルシートの background-attachment に fixed を指定します。

HTML
<style>
body {
  background-image: url(./image/back.png);
  background-attachment: fixed;
}
</style>

背景画像を縦(横)方向にのみ並べるには

背景画像は通常、縦方向、横方向双方にタイル状に並べられますが、スタイルシートの background-repeat を用いることでこれを縦方向のみ、もしくは横方向のみに並べることができます。repeat-y は縦方向のみ、repeat-x は横方向のみに並べます。

HTML
<style>
body {
  background-image: url(back.gif);
  background-repeat: repeat-y;
}
</style>

背景画像をひとつのみ表示するには

背景画像をひとつのみ表示するには、background-repeat を用います。また、background-position でその位置を指定することもできます。

HTML
<style>
body {
  background-image: url(back.gif);
  background-repeat: no-repeat;
  background-position: center center;
}
</style>

Copyright (C) 2003-2017 杜甫々
初版:2003年10月12日、最終更新:2017年12月17日
http://www.tohoho-web.com/how2/image.htm