css - 背景图像的 div 定位

Question

如果以下代码或我的问题有任何错误，请原谅，我对代码了解不多，但正在学习:)。对于链接中的空格和缺少这些内容感到抱歉 - < - 发布代码真的很费劲:)

在我的网站 http://second to nature .co.uk/en/我正在尝试在网站的两侧用 Ivy 创建背景图像。它是一个 prestashop 网站。

我确实设法通过以下 css 代码实现了这一点，但是它在 ie 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 元素中有一大堆元标记和其他 Assets 链接，而它们本应位于 head 中。

更好的方法是将两个 div 包裹在您的内容周围(默认情况下它们的宽度为 100%)，然后在每个 div 上放置 bg 图片。