如何设置背景图案以从页面中心开始重复？

Question

我想要在我的页面顶部重复-x背景，但我希望它从中心开始重复，而不是在整个页面上重复。例如：

Answer 1

一种方法是使用::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/

Answer 2

只是一个简单的背景CSS声明

background-position: center;

background-repeat: repeat-x;

Answer 3

像这样：

background-position:center;

但您还需要：

background-attachment:fixed;

随之而来。

see this page from w3schools.

fiddle here

Answer 4

您可以尝试这样的事情：

<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;
}

您也可以使用伪元素而不是显式定义的元素。

您可能使用此方法的原因是您有一个预定义的父容器。

Answer 5

使用div（您可能希望使用z-index：-1;）和：

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

fiddle here