如何設置背景圖案從我的頁面中心開始重複？

我想在我的頁面頂部重複-x的背景，但我希望它從中心開始重複，而不是整個頁面。例如這樣的事情：如何設置背景圖案從我的頁面中心開始重複？

enter image description here

2013-08-28 talena6

CSS不能做到這一點：有沒有辦法來劃分的背景區域進入象限。 –

afEkenholm能用CSS做到:) – talena6

我站好了！我正在考慮一個額外的div來保持背景，但僞元素同樣好！ –

的一種方法是使用::after僞選擇這樣的：

body::after { 
    content: ''; 
    position: absolute; 
    left: 50%; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    z-index: -1; 
    background: url('http://i.imgur.com/2xPV3gf.png') repeat-x left top; 
}

小提琴：http://jsfiddle.net/Vf4Rm/

來源

2013-08-28 21:01:18

完美！非常感謝。 – talena6

您將需要添加'z-index：-1;'以確保內容的其餘部分覆蓋僞元素（的前面）。看到我的答案下面的類似的方法沒有僞元素。 –

謝謝@MarcAudet，我會把它放在那裏。 :) –

這樣的：

background-position:center;

但你還需要：

background-attachment:fixed;

與它一起。

see this page from w3schools.

fiddle here

來源

2013-08-28 20:32:16

我不想讓背景居中。我希望它從中心開始水平重複。背景位置中心只會將其居中在屏幕上。我相信這是你建議的：http://jsfiddle.net/Mt2JS/ – talena6

@ talena6使用重複它，我認爲它的作品。 –

對不起，它似乎沒有做我想要的。這就是我想要的：http://i.stack.imgur.com/yIXFZ.jpg這絕對不是你的建議所做的，就像你在jsfiddle中看到的那樣。 – talena6

只是一個簡單的背景CSS聲明

background-position: center;

background-repeat: repeat-x;

來源

2013-08-28 20:33:28 Vector

這是你的意思？ http://jsfiddle.net/Mt2JS/我希望它從中心開始，然後開始重複。 – talena6

這是正確的， – Vector

但這不是我問的。我希望它從中心開始。像這樣：http://i.stack.imgur.com/yIXFZ.jpg – talena6

你可以嘗試這樣的事情：

<div class="bg-skew"></div> 
<p>Lorem ipsum dolor sit amet...</p>

使用單獨的元件可以保持背景和使用絕對定位來設置偏移。

的CSS：

html, body { 
    height: 100%; 
} 
.bg-skew { 
    background-image: url('http://placekitten.com/50/50'); 
    background-repeat: repeat-x; 
    background-position: 0 0; 
    width: 50%; 
    height: 100%; 
    position: absolute; 
    z-index: -1; 
    left: 50%; 
    top: 0; 
}

您還可以使用，而不是一個明確定義的元素僞元素。

你可能會使用這種方法的原因是，如果你有一個預定義的父容器。

來源

2013-08-28 21:05:18

使用一個div（你可能想使用的z-index：-1），其具有：

position: fixed; 
margin-left:50%; 
width:50%;

fiddle here

來源

2013-08-28 21:09:14

如何設置背景圖案從我的頁面中心開始重複？

回答

相關問題