在所有事物上都有重复的图像

Question

我在找到我所追求的具体外观时遇到了一些麻烦。

我已经应用了基本的Wordpress Twenty-F​​ifteen主题，并且我试图让200px宽的红色条显示在屏幕的右侧。

条形图由重复的200x1px图像组成。

问题是：

• A。）如果我将其设置为＆＃34;背景图像＆＃34;然后重复工作，但是 我无法将图像放在最上面。
• B。）如果我将图像设置为IMG 在DIV中，我可以将图像放在最上面，但不要重复。

任何人都可以帮我把这两个结合成一个结果，重复图像y和图像在顶部吗？

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

Answer 1

试试这个，将它添加到你的CSS中。 这将影响直接位于#main标记内的所有内容。

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

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

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

Answer 2

我使用的伪元素如下：

main {
     position:relative;
}

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