web-dev-qa-db-ja.com

空のスペースで背景画像の繰り返しを停止するにはどうすればよいですか？

背景画像の繰り返しで問題が発生しました。

コンテンツが非常に短く、モニターの高さよりも短い場合でも、背景画像は余分なスペースのために繰り返されます。

スクリーンショットを参照してください。

オレンジ色のバーが私のフッターです。下部の灰色の領域は余分なスペースです。

下部の背景画像の繰り返しを停止させることはできますか？

つまり、理想的には、背景画像がコンテンツである限り繰り返されます。

どんな助けでもありがたいです。

My Image。

htmlcssrepeat
6
Aaroninau

背景を体に貼り付けるのではなく、そこに別のdivを叩いて、その上に背景を置きます。内部コンテンツはdivを適切な高さにプッシュし、その時点で停止します（特に明記されていない限り）。

例えば：

<!doctype html>
<html>
<body>
    <div id="background">
        Your inner content
    </div>    
</body>
</html>

繰り返しの背景を、体ではなくcssの#backgroundに配置します。

6
danielsan

以下のプロパティを使用できます。

background-repeat:no-repeat;

詳細については、こちらをご覧ください site

repeat-yまたはrepeat-xを指定して、背景画像をそれぞれ垂直方向または水平方向に繰り返すこともできます。

背景画像に寸法を付けたい場合は、次を使用できます。

background-size:100px 100px; /* width height */

これがあなたの言いたいことだと思います。

13
Mr_Green

ここにコードを投稿できればいいのですが。

次のようなものを試してください。

<div>     
 <div>
  <div style="float:left;"></div>
  <div style="float:left;"></div>
  <div style="clear:both"></div>
 </div>
 <div class="footer"></div>
</div>
1
Manoj De Mel