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

Question

我真的在努力解决这个问题，但我无法弄清楚如何通过CSS创建它。

基本上就此website here我正在尝试添加图像以超出主要内容背景，如下图所示。在哪里说“Lattest Lessons”（抱歉打字错误）或其中所说的收到我们的新闻通讯。

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

以下是一些代码：

.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容器是定位元素（在您的示例中为：relative）

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

带有'move-left'类的段落位于main-content元素内部，相对定位，然后向左推25px。

position:relative;
left: -25px;