背景圖片的div的定位

請原諒，如果在下面的代碼或我的問題有任何錯誤，我不知道很多關於代碼，但正在學習:)。對不起，鏈接中的空間和缺乏這些東西 - < - 真正掙扎的發佈代碼:)背景圖片的div的定位

在我的網站http：// second to nature .co.uk/en /我試圖創建具有常春藤色的背景圖片網站的雙方。它是一個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; 
}

任何人都可以看到我哪裏出錯或有修復？幫助將不勝感激。

非常感謝

來源

2013-05-03 Furinkazan

您已經發布了'＃內container'用'background'財產，但你真正的網站，我沒有看到它:)所以也許你應該首先將其添加到工作？ – Morpheus 2013-05-03 14:21:33

它在那裏。我只是看了一下。 – 2013-05-03 14:25:53

您的CSS一個錯字：

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

有一個在URL的最後一個雙）），那裏應該只有一個。

然而，你的HTML都搞砸了，還有更好的方法來做到這一點。首先，你的body元素中有一大堆meta標籤和其他資源鏈接，當它們都應該在head中時。

一個更好的方法來做到這一點將是圍繞你的內容包裝兩個div（默認情況下它們將是100％寬度），並將bg圖像放在每個圖像上。

來源

2013-05-03 14:22:10

非常感謝 - 最簡單的事情！ :)哪個HTML搞砸了？主頁？ – Furinkazan 2013-05-03 14:29:08

Prestashop tho變得相當複雜 - 我必須編輯TPL文件等 - 至少對我來說很複雜。 – Furinkazan 2013-05-03 14:31:16

這是所有頁面上的相同問題。如果你在任何頁面上檢查你的代碼（通過網絡檢查員 - 右鍵單擊> Chrome中的檢查元素），你會發現頭部幾乎是空的。也許嘗試驗證你的頁面，看看問題是什麼。 – 2013-05-03 14:55:02

您可以使用Modernizr，然後使用我們的CSS3邊框圖像。然後邊框圖像將顯示在IE6,7和8中。

您有IE6用戶擔心的恥辱。這是一個糟糕的，錯誤的和不安全的瀏覽器。

http://modernizr.com/

來源

2013-05-03 14:42:15 tahdhaze09

我應該提到 - 我試過css3pie和modernizr – Furinkazan 2013-05-03 14:55:06

現代化的發生了什麼？它沒有工作？ – tahdhaze09 2013-05-03 15:44:45

查看您正在使用的頁面，有幾種方法可以創建所需的效果。你可以在頁面的兩邊創建一個帶有ivy的圖像，並創建內容以便在中間（可能是最好的方式，而不需要CSS3）。你也可以做CSS3方法，但創建一個邊框邊界的包裝容器，並將內容放置在中間（對於較老的瀏覽器，需要javascript）。 – tahdhaze09 2013-05-03 15:55:39

背景圖片的div的定位

回答

相關問題