背景画像(壁紙)

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

• 背景画像を張るには
• 背景画像を固定するには
• 背景画像を縦(横)方向にのみ並べるには
• 背景画像をひとつのみ表示するには

背景画像を張るには

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

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

背景画像を固定するには

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

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

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

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

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

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

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

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