如何让我的背景 repeat-x 作为我网站的底部标题？答案

【问题标题】：How do I make my background repeat-x as a bottom header on my website?如何让我的背景 repeat-x 作为我网站的底部标题？
【发布时间】：2014-08-22 21:13:02
【问题描述】：

现在我正在使用以下代码在我的网站底部放置一个导航窗格，但它在页面顶部显示了一行：

--CSS（内部）--

<head>
  <style>
    body.main
     {
       background: url('images/bindingdark_small.png') repeat-x bottom left;
     }
  </style>
</head>


<body class="main">
</body>

【问题讨论】：

你的身体（或你的 CSS）中是否有任何东西可以赋予它任何高度？就目前而言，您的身体将是空的，并且“线”是您在任何填充/等上重复图像的几个像素。是在空的body。
你能给我们一个链接吗？也许背景图像不够大。尝试添加'background-size: auto 100%;'

标签： css background styles stylesheet

【解决方案1】：

我认为可能会发生两件事：

就像 Paul Roub 在 cmets 中所说，如果您的 body.main 为空，那么您的行就是您的图像重复自身的结果。
也许您需要添加一些 padding-top 以增加背景的高度。为其添加一些填充并测试其结果是否符合您的预期。

我希望这会有所帮助。

【讨论】：

【解决方案2】：

它显示在页面顶部的原因是因为您的页面实际上是空的。检查body 元素的高度值。它的height: 0px;。

在你的页面上填充内容，或者给你的body添加静态值，例如：

body {
    height: 1000px
}

不确定您是否会喜欢此解决方案。但我有一个更好的主意。例如 - 在body 中添加一个footer 标签，并声明以下值：

footer {
    width:100%;
    height:40px;
    position:absolute;
    bottom:0px;
    background: url('images/bindingdark_small.png') repeat-x bottom left;
}

无论您的内容和正文如何，它都会停留在页面底部height。希望对您有所帮助。

【讨论】：