2009-12-21 2 views
4

body 요소 가운데 가운데에 div (#main)이 있습니다. body에는 가로로 반복되는 배경 이미지와 색이 요소의 왼쪽 상단에 정렬되어 있습니다. #main은 고정 폭, 가변 높이 및 자체 배경 이미지 및 색상을 가지고 있습니다.가로로 백그라운드 첨부 파일을 사용하여 배경을 고정하는 방법

아래 그림과 같이 달성하고자하는 것은 의 내부 이미지를 body의 배경 이미지에 맞춰 정렬하는 것입니다. 두 개의 배경 이미지가 비슷해 지므로 올바른 맞춤이 필요합니다.

나는 #main의 배경 이미지에 background-attachment: fixed;을 사용하려고 시도했으나 분명히 전체 배경 이미지가 페이지와 함께 스크롤되는 것을 제외하고는; 여기서 내가 배경으로 #main의 배경이 body의 것과 정확하게 정렬되어 있지만 수평으로 만 반복되고 사용자가 수직으로 스크롤 할 때 사용자를 따라 가지 않는 효과를 얻으려고합니다.

Demonstration http://img163.imageshack.us/img163/2783/bgfixedexample.png

답변

3

당신은 속성의 배경 위치 및 배경 반복

.myClass { 
    background-image:url(myimg.png); 
    background-repeat:repeat-y; 
    background-position: -5px 5px; /* Any percentage or pixel value you want 
    or you can use center top etc.*/ 
} 

을 사용할 수 있습니다 (나는 그것이 내 Google 오픈 ID를 허용하지 않습니다를 제외하고, doctype에 게시하려고) 이러한 CSS 속성을 가지고 놀아 라, 나는 당신이 원하는 것을 얻을 것이라고 확신한다.

+0

나는 뒤늦은 생각에서 아주 어리 석다. '# main'이 수평 중심에 있다고 가정하면, "top center"의 배경 위치는 올바르게 정렬됩니다. 내 테스트 페이지에서 #main에 잘못된 마진이 있었고 중심에 있지 않았기 때문에 눈치 채지 못했습니다. –

관련 문제