div의 왼쪽과 오른쪽에 타일이있는 영역을 만들려면 어떻게해야합니까?

Question

비네팅 효과가있는 배경 이미지가있는 div # main이 있습니다.

나는 페이지의 중심이 전체 이미지를 유지하지만 나는 지금까지이 이미지를 화면 왼쪽에서 타일에 그래픽에 대해 원하는 것, 오른쪽에서 타일 또 다른 그래픽 이미지의 오른쪽 끝을 화면의 오른쪽 끝까지 확대합니다. 나는 타일링에 관심이 없다. 아마 디자이너에게 이미지의 왼쪽과 오른쪽 가장자리를 같은 색과 질감으로하여 배경에 같은 질감의 색을 칠하도록 요청할 수는 있겠지만, 나는 그것을 그대로 풀 수있다.

그래서 디자이너가 두 개의 별도 그래픽을 만들 필요가 있다고 가정합니다. 한 타일은 이미지의 왼쪽 가장자리와 잘 어울리 며 다른 그래픽은 이미지의 오른쪽 가장자리와 잘 어울립니다.

왼쪽 타일 영역이 화면의 왼쪽에서 시작하고 이미지의 왼쪽에서 멈추고 오른쪽 타일 영역이 시작을 알 수 있도록 div 및 css를 어떻게 설정합니까? 이미지의 오른쪽 가장자리에 있고 화면의 맨 오른쪽으로 계속? bg_tile.jpg는 비네팅없이 타일 수 배경입니다

는

Answer 1

이 같은

뭔가, 일 것이고, bg.jpg는 설명에 게시 된 이미지입니다 :

#main_wrapper { 
    background: url(/images/bg_tile.jpg) repeat 50% 0; 
} 

#main { 
    width: 960px; 
    height: 300px; 
    margin: 0 auto; 
    background: url(/images/bg.jpg) no-repeat 50% 0 transparent; 
} 

Cultureamp에 비슷한 효과가있다 (iPad 뒤). css가 작동 중인지 확인하십시오.