페이지의 양면에 배경을 정렬하는 방법은 무엇입니까?

페이지 내용이 가운데에있는 div와 페이지의 왼쪽과 오른쪽에 별도로 정렬되는 반복적 인 배경이 필요합니다 ( What it looks like now ). 왼쪽에서 화살표 패턴은 페이지의 왼쪽 끝이 끝나는 곳에서 시작해야하고 화면의 왼쪽 끝까지 반복하고 오른쪽에서 같은 것을 반복해야합니다. 오른쪽에서 제대로 정렬되어 있지만 우연의 일치입니다. this fiddle이페이지의 양면에 배경을 정렬하는 방법은 무엇입니까?

는 HTML :

이

<body> 
    <div class="container"> 
     <div class="content"> 
      <p> 
       Lorem ipsum dolor sit amet 
      </p> 
     </div> 
    </div> 
</body>

는 CSS :

이 이

* { 
    min-height: 100%; 
    margin: 0; 
    padding: 0; 
} 
body { 
    background-image: url('http://i.imgur.com/mcX3gBy.png'); 
    background-attachment: fixed; 
} 
.container { 
    min-height: 100%; 
} 
.content { 
    margin: 0 auto; 
    width: 150px; 
    background-color: #fff; 
    min-height:100%; 
}

출처

2013-07-27 maciejjo

음,이 그러나 할 수는 그 꽤 .. 당신은 변경해야되지 않습니다 현재 코드에 배경의 2 부분을 만드는 구조 (이 경우 css3의 다중 배경도 도움이되지 않습니다).

Here the working jsFiddle

나는 다음과 같은 .container 내부에 추가했습니다 :

<div class="leftBG"></div> 
<div class="rightBG"></div>

을 그리고 CSS를 추가 :

이 기본적으로이 개 부분의 배경을 분할되어 무엇을

.leftBG{ 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:50%; 
    height:100%; 
    z-index:1; 
    background:url('http://i.imgur.com/mcX3gBy.png') top right repeat; 
} 

.rightBG{ 
    position:absolute; 
    top:0px; 
    left:auto; 
    right:0px; 
    width:50%; 
    height:100%; 
    z-index:1; 
    background:url('http://i.imgur.com/mcX3gBy.png') top left repeat; 
}

- 왼쪽 및 오른쪽에 각각 왼쪽 배경이 정렬되고 오른쪽 배경이 오른쪽에 정렬되면 각각의 배경이 있습니다.

출처

2013-07-27 09:20:44

중간 블록이 끝나는 배경은 여전히 시작되지 않습니다. [이] (http://i.imgur.com/VNczttR.png)처럼 보일 것입니다. 아마도 왼쪽과 오른쪽 div는 가운데가 아니라 양쪽에 끝나야합니다. 센터 사업부? – maciejjo

그래,하지만 중앙 div의 측면에 정렬되지 않습니다 ... 중간 블록이 끝나는 곳에서 첫 번째 배경 블록이 바로 시작되어야합니다. – maciejjo

오른쪽 및 왼쪽 div가있는 솔루션이 정확하다고 생각하지만 끝내야합니다. 중앙 블록의 측면, 나는 그것을 달성하는 방법을 모르겠습니다. – maciejjo

페이지의 양면에 배경을 정렬하는 방법은 무엇입니까?

답변

관련 문제