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 回答