标题后的背景图像

Question

工作演示：http://jsbin.com/opokev/54

我正在努力将此图像作为背景图像，并且还有一个标题，但是，演示显示我的标题正在切割到图像上。

如何更正此问题，以便首先绘制标题，然后绘制背景主体图像。我仍然希望保持图像的质量，而不是缩放它。

Answer 1

在这里你http://jsbin.com/opokev/64/

刚刚将top: 0更改为top: 85px并且有效。

Answer 2

尝试使用background-position。

background-position: 0px 85px;

可以做到这一点：）

或者您可以尝试使用它：

#background img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 85px;
    left: 0;
    z-index: -1;
}

我看不出这些与背景有任何区别（考虑缩放）：

http://jsbin.com/opokev/54

http://jsbin.com/ijoyiy/2

然后，我离睡觉2分钟，我没戴上眼镜;）

Answer 3

删除img代码并使用background-image div#background。然后，将background-position设置为center 85px。

组合CSS：

div#background
{
    background:url('http://i52.tinypic.com/33xd1yu.jpg') no-repeat center 85px;
    width:100%;
    height:100%;
}

这会将背景图像向下移动85px。