相對於文檔而不是元素的CSS背景位置？

我想知道如果這是可能的，能夠將圖像的背景位置設置爲html文檔的左上角，而不是元素左上角的背景。相對於文檔而不是元素的CSS背景位置？

僞代碼

body { 
    background-image: url(someurlhere); 
    background-position: top left; 
} 
element { 
    background-image: url(sameurlhere); 
    background-position: top left /*Relative to body not element*/; 
}

如果我需要提供別的什麼這個問題，讓我知道，我會修改它，但我敢肯定，這是相當直截了當。

編輯：我不能使用絕對定位，我正在加載動態內容，我想要一個平鋪的圖像以適應幾個元素的背景，以使頁面中的洞發生錯覺。

編輯2：下面是一些圖片，以更好地解釋問題。

圖1：注意頭元素中的重複模式。 http://i.imgur.com/3lWguRE.png

圖片2：這個變化是我想要實現的。 http://i.imgur.com/WtOeCQ2.png

來源

2013-06-06 Andrew Fairbairn

爲什麼不乾脆把body元素的背景圖像？ –

的第一個問題是，爲什麼你不只是設置body元素上的背景圖像。

但是，如果這不合適，您可以選擇將元素上的背景圖像設置爲fixed，在這種情況下，它將固定在瀏覽器窗口的左上角並且不會滾動。

element {background: url(image.fig) repeat fixed;}

但是，背景只會顯示在它所連接的元素上，即使它從屏幕的左上角開始。（這是非常方便的視差效果。）

編輯：作爲一個方面說明，如果你使用的是速記背景屬性，fixed設置與

background-attachment: fixed;

來源

2013-06-06 02:38:54

對不起，這不是我想要達到的目的，我已經添加了一些圖像並附上了一個註釋，我希望這有助於更好地解釋它。 –

我沒有看到你在那裏獲得什麼。你是否試圖使模式保持一致，這樣就好像整個頁面上只有一個背景一樣？我認爲你可以用我的方法做到這一點，在每個需要背景的元素上放置相同的背景聲明。 –

哦，我看到，固定適用於background-attachment而不是background-position。這確實奏效，但您可能需要爲其他可能遇到此問題的人澄清。謝謝您的幫助。 –

所有你需要做的就是將你的元素包裹在一個絕對div中，然後按照你的意願定位它。

來源

2013-06-06 02:25:05 Stephen

編輯了一下這個問題，抱歉，絕對定位不是一個選項:)。 –

這怎麼可能不是一種可能性？我可以看到一個codepen或一個現場示例？ – Stephen

我有一個運行在http://ruddev.com/ruddev/的網站的生動發展。我試圖使標題欄與背景一起工作來改變模式。 –

你能提供一些關於元素上下文的更多信息嗎？它是否有任何定位？文件在哪裏？對我來說有點不清楚你究竟想要完成什麼。

將背景放在身體上的工作？

這將設置在左上角的背景，但我懷疑這實際上是什麼，你要完成：

<div class="test"> 
</div> 

.test:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: url(http://i1112.photobucket.com/albums/k497/animalsbeingdicks/abd-318.gif); 
    width: 352px; 
    height: 263px; 
}

http://jsbin.com/imurah/1/

來源

2013-06-06 02:33:47 robtarr

你可能有某種形象的文件可以證明你正在做什麼？ – robtarr

感謝您的迴應，但您有理由懷疑，這不是我想要實現的。我添加了更多的上下文+現場開發。如果圖片可以幫助我嘗試製作一些。 –

這不是一個糟糕的解決方案，robtarr。圖像可以放置在具有負Z指數的背景中。 –

相對於文檔而不是元素的CSS背景位置？

回答

相關問題