响应的背景图像分辨率

Question

我遇到了背景图像比例和响应式设计方面的问题。

我有一个简单的标题图像背景和内容图像背景。标题图像应该无缝地合并到内容中。两个图像都具有细纹理，因此它们需要始终保持相同的比例。

标题背景位于<img>标记中，而内容为background-image，因为它需要对未知数量的内容使用repeat-y功能...

但是你可以看到缩放的内嵌图像和背景之间的颗粒差异：

我知道background-size属性，但这不是向后兼容的，而且我不确定它是否能够响应。

我的CSS ：

#header{

    max-width:700px;
    width:100%;
    margin:0 auto;

}

#header img{

    max-width:700px;
    width:100%;

}

#content{

    max-width:700px;
    width:100%;
    height:600px;    // <-- for testing with no content
    margin:0 auto;

    background-image:url('../imgs/bg-main.jpg');
    background-repeat:repeat-y;

}

相关HTML ：

<section id="header">
    <img src="lib/imgs/bg-top.jpg"/>
</section>
<section id="content">
    <!-- content goes here !-->
</section>

任何有关修复或某些选项的帮助都会很棒。

Answer 1

您会考虑将标题图片设为透明png吗？在标题图像中省略浅棕色纹理，并将其设置为包裹#header和#content的元素的背景图像。

否则，background-size会做你想要的。 IE8上的访问者看不到你想要的效果，但这并不是世界上最糟糕的事情。

请参阅：http://caniuse.com/background-img-opts