管理人のブログ

背景画像を一方向にのみ繰り返す

みなさん、こんにちは。管理人です。
このWEBサイトの壁紙には、配置するときにいくつか注意が必要となるものがあります。
例えば、コレ↓

波打ち際

sample

壁紙に設定すると、下方向に波打ち際が繰り返す画像になります。
ですが、これを壁紙設定すると以下のような表示になる場合があります。

おっと、右端に不自然な海が出てきちゃっています。これは画像が縦横両方に繰り返し表示されているためです。これを防ぐために「壁紙を縦方向にのみ繰り返す」設定が必要になります。

HTMLの<head>内に<style>を追加して設定をしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<style>
body {
background-image: url('背景.jpg'); /* 背景画像を指定 */
background-repeat: repeat-y; /* 縦方向にのみ画像を繰り返す */
}
</style>
</head>
<body>
<h1>波打ち際の壁紙</h1>
<p>壁紙素材使用サンプル画面です。</p>
</body>
</html>

<body>に直接書く場合はこんな感じ↓。

<body style="background: url('背景.jpg') repeat-y;">

これで、画像は縦にのみ繰り返され、右に不自然な表示がされることはなくなります。
ちなみに「壁紙を横方向にのみ繰り返す」場合は、「repeat-y」の部分を「repeat-x」に変更します。他にも色々な設定が可能です。

HTMLの設定方法は、詳しい説明が掲載されているサイトが沢山ありますので、ぜひ調べてみてください。