Mam kawałek kodu i działa świetnie - pozycjonuje grafikę w tle na środku obojętnie jakiej szerokości skaluje się strona

.srodek{
min-width:1020px;
height:473px;
margin:0px;
padding:0px;
background:transparent url("images/srodek_1.png") no-repeat scroll center top;
}


Ale mam problem - chciałbym pociąć ten obrazek i zrobić, żeby były 3 jego części obok siebie i też, żeby się skalowały zawsze na środku...
Jak to zrobić?

możesz spróbować zastosować się do tej porady - kilka obrazków w tle CSS

Niestety jak się scroluje - zmniejsza i powiększa - loga i plik z rozmytymi kropkami nie trzymają się razem -nie o to mi chodzi...



Zrobiłem tak:
.srodek{
/*min-width:1020px;*/
width: 1909px;
height:473px;
margin:0px auto;

/*background:transparent url("images/srodek_1.png") no-repeat scroll center top;*/
}
.srodek_l{
height:473px;
width: 552px;
float : left;
background:url("images/srodek_l.png") scroll;
}
.srodek_body{
height:473px;
width:804px;
float : left;
background:url("images/srodek.jpg") scroll;
}
.srodek_p{
height:473px;
width:553px;
float : left;
background:url("images/srodek_p.png") scroll;
}

ale jak scroluję powiększenie - więcej niż zadana szerokość strony width: 1909px; - przesuwają się skrawki, natomiast jak ją zmniejszam - wszystko się kupy trzyma...