html - 在页脚中水平重复 x 图像

Question

我想在我的页脚上使用“全宽”条纹，但显然它不想工作。这是我现在拥有的示例。:

我希望页脚对其 div 执行 repeat-x。所以，直到屏幕结束(就像它在上半部分所做的那样)。这可能非常简单，但我对 CSS 样式相当缺乏经验，所以请帮帮我。

[编辑] 页脚 div 在包装器内。 div 的边缘与包装宽度对齐。我的问题是它是否有可能“重叠”限制，直到屏幕结束。

我还要给它一个具体的位置，不随文末而变。我知道我需要将它用作position:absolute，但它总是出现在标题之后，即使我给它一个 Y 位置。我可能忘记了一些简单的事情。

这是我在 Footer 类中的现有代码:

#footer {
    background:url(wp-content/uploads/2012/06/whitestripe.png) repeat-x;
    position:relative;
    width:100%;
    clear:both;
    text-align:center;
    line-height:16px;
    font-size:11px;
}
#footer a {
    padding:2px 3px;
    color:#004a6a;
    text-decoration:none;
}
#footer a:hover {
    color:#105a7a;
}

谢谢。马可·罗伯托。

Answer 1

将页脚元素移到主包装器之外，使其不受限制。例如在体内就可以了。

然后修改css:

#footer {
  position: absolute; // or fixed if you want it to scroll along
  left: 0;
  right: 0; // or width: 100%
  bottom: 10px; // change to the value you want
}