css - 如何通过 CSS 在背景周围添加图片？

Question

我真的在努力做这件事，但我不知道如何通过 CSS 创建它。

基本上在这个网站上，我正在尝试添加图像以超出主要内容背景，如下图所示。上面写着“最新课程”（抱歉打错字）或接收我们的时事通讯的地方。

有人有俱乐部吗？我迷路了！

这是一些代码：

.main-content {
    position:relative;
    z-index:100;
    padding:1em 0 8.5em 0;
    background:#fff;
}

.main-content p {
    color:#555;
}

.site-wrap {
    position:relative;
    min-height:100%;
}

Answer 1

我建议做的是在后台创建一个 div，如下所示：

HTML：

<div id="backgrounddiv">
</div>

所以 HTML 真的很简单。不要在那些 div 中放任何东西。现在对于 CSS：

CSS：

    #backgrounddiv {
length:100%; //spans length of page
width:100%;  //spans width of page
z-index:1;   //makes sure background is behind all the other objects
background-color: #000; //black background
position: absolute; //isn't affected or doesn't get affected by other elements
}

Answer 2

您可能正在寻找的是正确定位元素。根据您的需要，这可以是相对定位或绝对定位。在任何一种情况下，请确保 PARENT 容器是定位元素（在您的示例中它是：相对的）

看到这个小提琴：http: //jsfiddle.net/callseng/UUxqG/

具有“左移”类的段落位于 main-content 元素内，相对定位，然后向左推 25px。

position:relative;
left: -25px;