残りの部分を確認せずに何が問題なのかを正確に把握することは困難ですが、それでもいくつかの指針を示すことはできます。
必要に応じてリンクを送信しますが、以下を簡単にコピーして貼り付けて、自分で確認できます。
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#blue_decoration {
height: 85px;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/a/aa/Air_Force_Good_Conduct_Medal_ribbon.png');
}
#bottom_blue_decoration {
height: 30%;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/a/aa/Air_Force_Good_Conduct_Medal_ribbon.png');
}
</style>
</head>
<body>
<header id="blue_decoration"> Hello World</header><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<footer id="bottom_blue_decoration"> don't collapse me! </footer>
</body>
</html>
画面全体で問題なく繰り返されることに気付くかもしれません。ただし、スタイリング自体に関連するポジションはありません。むしろ、コンテンツが崩壊しないかどうかにかかっています。上下の位置を指定した方がいいかもしれません。もう 1 つのことは、おそらく id を再利用しているということです。厳密に言えば、特定のページで 1 回だけ使用する必要があります。これは簡単に修正できます。スタイリングの一部をクラスとして指定し (ハッシュの代わりにドットを使用)、id の代わりにキーワード class を使用して呼び出すだけです。
背景サイズの非絶対値を使用して実験してみてください。代わりに、反応するパーセンテージを使用してください。重要な質問は、この背景をカバーするコンテンツが必要かどうかです。コンテンツのない画像にしたい場合は、最終的に<img>
タグを使用する方が良いかもしれません...