repeat ile yapacaksın ama resim sanırım tek renk üzerine değil.Bunun için resmi üst orta ve alt kısım olarak üç parçaya bölmen lazım.Ve 3'e böldüğün kısımlardan orta kısım için kullanacağın resmin sadece ufak bir kısmını kesiyorsun.Ton farkı olmasın seçeceğin kısımda çünkü burası içeriğe göre uzayıp kısalacak.

css kodların örnek. kodlarda geçen fonksiyonları araştırarak öğrenebilirsin. Bunu yazma gereği hissetmiyorum.

<!-- resim adında div oluşturuyoruz ve özelliklerini belirtiyoruz --!>
#resim{
float:left; <!-- sola yasla --!>
width:170px;  <!-- 170px genişlik ver --!>
height:100%;  <!-- içeriğe göre uzamasını istiyorsak 100% yazıyoruz --!>
}
.ust{  <!-- ust adında class tanımlıyoruz --!>
float:left;
width:170px;
height:50px; <!-- 170px yükseklik ver --!>
backgraund-image:(ust.jpg);   <!-- arkaplan için resim tanımlıyoruz --!>
backgraund-repeat:none;   <!-- arkaplan resminin tekrarlamamasını istiyoruz --!>
}
.orta{   <!-- orta adında class tanımlıyoruz --!>
float:left;
width:170px;
height:100%;
backgraund-image:(orta.jpg);
backgraund-repeat:repeat-x;   <!-- arkaplan resmi aşağıya doğru uzasın --!>
}
.alt{   <!-- alt adında class tanımlıyoruz --!>
float:left;
width:170px;
height:50px;
backgraund-image:(alt.jpg);
backgraund-repeat:none;
}

kullanırkende

<div id='resim'>

 <div class='ust'></div>
 <div class='orta'> Diğer işlemlerimizi burda yapıyoruz</div>
 <div class='alt'></div>

</div>

Kısaca bu şekilde .Biraz karışık gibi görünebilir. Hatalarımda olabilir aceleyle yazdım.