까다로운 CSS/이미지 배경

Question

일할 수있는 배경을지고이 문제를 가졌 ... 그것은 3 개 부분의 이미지를 필요로 .. (위, 가운데, 아래)

내가 가까이 ... 내가 해요있어 확실하게 나는 뭔가를 쉽게 놓치고 있습니다 ...이 jsfiddle을 확인하고 전화를 걸 수 있는지 확인하십시오!

http://jsfiddle.net/bb6hZ/

감사합니다!

내가 무엇을 가지고 : 나는 'http://www.pacificcheese.com/img/int/bg_article.png

: 나는 시도하고이 acheive 두 개의 추가 BG 사업부의의를 사용하고

<article> 
<div class="bg1"> 
    <div class="bg2"> 
     <h2>post name title here yo</h2> 
     <span class="meta">September 10, 2012</span> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </div> 
</div> 
</article> 

을 ... 나는 이미,이 다음 위치에있는 이미지 파일을 생성 예전에 여러 번 해본 적이 있습니다. 정확히 어떻게 기억할 수 없는지 ... 몇 년 동안이 방법을 사용할 필요가 없었습니다.

도움을 받으실 수 있습니다! 감사!

Answer 1

알아 들었어!

http://jsfiddle.net/bb6hZ/2/

article,.bg1,.bg2 {background:url("http://www.pacificcheese.com/img/int/bg_article.png") -556px 0 no-repeat; float:left;} 
article {display:block; width:556px; background-position:0 0; padding-top:130px;} 
.bg1 {background-repeat:repeat-y;} 
.bg2 {background-position:-1112px 100%; margin:-130px 0; padding:30px 20px 45px;} 

Answer 2

이 시도 : 당신의 예상 출력은 무엇

.bg1 {background-repeat:repeat-y; border:transparent 1px solid; }