Question

请原谅我，如果下面的代码或我的问题有任何错误，我不太了解代码，但我正在学习:)。对不起链接空间和缺少这些东西 - ＆lt; - 真的很难发布代码：）

在我的网站上http：// second to nature .co.uk / en /我正在尝试用网站两侧的常春藤创建背景图片。它是一个prestashop网站。

我确实通过以下css代码实现了这一点，但是它不适用于6-8 - 因为那些浏览器不支持css3。

background:url(http:// second to nature.co.uk/img/backgroundleft.jpg) top left fixed
no-repeat, url(http:// second to nature.co.uk/img/backgroundright.jpg) top right fixed no-repeat;

因此经过一些研究，我尝试用两个div创建想要的效果：

<div id="container">
  <div id="inner-container">
  </div>
</div>

然后使用以下css来实现它。

正如您所看到的，如果您访问该网站，左侧图像会正确显示，但右侧不会显示。

#container {
    background: url(http:// second to nature.co.uk/img/backgroundleft.jpg) repeat-y;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 130px;
    height: 1000px;
}
    #inner-container {
    background: transparent url(http:// second to nature.co.uk/img/backgroundright.jpg)) repeat-y;
    position: fixed;
    top: 0px;
    right: 0px;
    width: 130px;
    height: 1000px;
}

任何人都可以看到我出错或修复的地方吗？非常感谢帮助。

非常感谢

Answer 1

CSS中有拼写错误：

url(http://secondtonature.co.uk/img/backgroundright.jpg))

在URL的末尾有一个双）），只有一个。

但是......你的HTML搞砸了，有更好的方法可以做到这一点。首先，您的body元素中有一大堆元标记和其他资源链接，当它们全部位于head时。

更好的方法是在内容周围包裹两个div（默认情况下它们的宽度为100％）并将bg图像放在每个上面。

Answer 2

您可以使用Modernizr然后使用CSS3边框图像。然后边框图像将显示在IE6,7和8中。

您有IE6用户担心的耻辱。它是一个如此糟糕，错误和不安全的浏览器。

http://modernizr.com/

背景图像的div的定位

2 个答案: