在所有内容上都有重复的图像答案

【问题标题】：Have a repeated image on top of everything在所有内容上都有重复的图像
【发布时间】：2015-11-12 21:14:32
【问题描述】：

我在获得我想要的特定外观时遇到了一些问题。

我已经应用了基本的 Wordpress 25-15 主题，我试图让一个 200 像素宽的红色条出现在屏幕的右侧。

该条由重复的 200x1 像素图像组成。

问题是：

A.) 如果我将其设置为“背景图像”，则重复有效，但是我无法将图像放在顶部。
B.) 如果我将图像设置为 IMG 在 DIV 中，然后我可以将图像放在顶部，但不再重复。

谁能帮我把这两个组合成一个结果，重复 image-y 和 image on top？

您可以在这里查看我的网站：http://u64.ca/

【问题讨论】：

desired 结果的图像会很有用，但我真的认为这里的图像/背景图像不是要走的路。
那你有什么建议？
在我知道它应该是什么样子之前很难进一步评论。
如果您查看我提供的链接，那里有一个“背景图像”代码，该代码会在页面侧面呈现一个红色条。我只是希望这个红色条位于内容框的顶部，而不是在它后面。

标签： css image alignment z-index repeat

【解决方案1】：

我会使用类似的伪元素：

main {
     position:relative;
}

main:after {
    content: "";
    width: 189px;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background-color: #DB0F12;
}

【讨论】：

这似乎有效，直到页脚。我将更多地使用代码。不过谢谢！
您可以在页脚上使用相同的内容。猜测一下，无需再次浏览该网站，我猜测页脚可能不在 main 元素中。
更正，main:after 似乎将栏放在博客文章中，而不是整个页面。 (body:after 似乎有效，但没有达到页面的长度)

【解决方案2】：

试试这个，把它添加到你的 CSS 中。这将影响直接出现在#main 标签内的所有内容。

#main > * {
margin-right: 200px;
}

或者您可以对.site-content 应用边框并丢失背景图片。

.site-content {
    border-right: 189px solid #db0f12;
}

【讨论】：

这两个都只是简单地转移内容。我希望红色条的边缘（大约 20 像素）与竞争框重叠