8

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

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

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

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

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

つまり、理想的には、背景画像がコンテンツと同じ長さだけ繰り返されるということです。

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

私の画像。

4

5 に答える 5

20

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

background-repeat:no-repeat;

詳細については、このサイトをご覧ください

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

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

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

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

于 2012-09-26T04:21:00.080 に答える
7

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

例えば：

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

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

于 2012-09-26T05:34:56.587 に答える
1

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

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

<div>     
 <div>
  <div style="float:left;"></div>
  <div style="float:left;"></div>
  <div style="clear:both"></div>
 </div>
 <div class="footer"></div>
</div>
于 2012-09-26T10:12:45.737 に答える
0

スタイルセクションでこれを試してください。

background-size: cover;
background-repeat:no-repeat;
于 2018-10-26T11:28:18.147 に答える
0

次のように、CSS作成で背景を直接設定できます。

body {
 background: url(../images/background.jpg);
 background-size: cover;
 background-repeat: no-repeat;
}

これがお役に立てば幸いです：D

于 2021-11-23T14:39:03.437 に答える