2011-07-31 6 views
1

반복되는 배경 '시작'이 div의 맨 아래에 고정되고 맨 위에 오버플로되도록하는 방법이 있습니까? (다른 방법으로 기본보다 둥근)CSS : 하단 대신 오버플로 오버플로가있는 배경 반복

달성하려는 것을 보여주는 작은 예제. 아래 이미지의 빨간색 선은 여러 div 사이의 (가로) 경계선입니다. 가운데 div는 반복되지 않는 단일 이미지를 사용하여 위와 아래 사이의 전환으로 사용됩니다. 하단 div의 배경은 종이 구멍이있는 반복되는 더 어두운 이미지로 구성되어 있으며, 그 결과 용지 경계가 아래에 표시됩니다.

이제 위 div (상당한 내용 포함)에는 아래에서 시작하여 위쪽으로 반복되는 반복되는 배경 이미지가 있어야합니다. 이는 '용지 경계'의 더 작은 거리 또는 부분 구멍으로 끝나는 대신 구멍 사이의 정확한 거리 비율을 유지하기위한 것입니다.

background example

바람직하게는 method 4 of equal height columns와 호환되어야합니다,하지만 난 거기에 문제가 표시되지 않습니다.

답변

2

상단 div에 background-position: right bottom;을 설정했는지 확인하고 배경 이미지가 맨 아래부터 시작하여 상단에서 '오버플로'해야합니다. 속기

예 :

.my-div { 
    background:#fff url(my-bg.png) right bottom repeat; 
} 

경우 일부 참조는 더이 문제를 탐구하고 싶습니다 :
http://reference.sitepoint.com/css/background-position