Witam.
Mam problemy z pocięciem layoutu. Jest to layout jednoelementowy - nie posiadam tła, jest to cała spójna kompozycja, z częścią środkową (tekst itd) o szerokości tj. 1024px. Całość = 1920.

Chciałbym zrobić tak żeby dostosowywało się do szerokości ekranu. Np. mamy rozdzielczoość ekranu 1024 px to "boczne tła" ucina. Jeśli mniejsze niż 1024px to wtedy wyświetla tylko tą srodkową część, ale dodaje pasek przesuwania poziomego. Jeśli większa np. 1600px, to wtedy (1600- 1024)/2 boki wyświetla o wielkości 288px lewy i 288px prawy, czyli resztę ucina.

http://www.imagebanana.com/view/p3v6nvfd/Beztytuu.png
Na czerwono musi się zawsze wyświetlać, czarne elementy stopniowo w zależności od szerokości monitora.

Mam nadzieję że zrozumieliście co mam na myśli i proszę o poradę w jaki sposób Wy byście to wykonali.

Demo: http://jsfiddle.net/FhqbP/9/

HTML:


CSS:


O takie coś chodzi ?

bardziej o to że nie mogę ustawić background - wszystko na divach. dostałem taki layout że jest tak jakby całość - tło + to co jest po środku (czarne). Czarne i czerwone jest złączone i nie mogę wyodrębnić warstwy - dlatego że było robione przez grafika w 3dsmaxie. Już zmian nie można dokonać dlatego się pytam.

Wyglądało by to jako cos takeigo bardziej:


Gdzie głowny jest content_center, i left_bg i right_bg musi się ucinać odpowiedni w zależności od monitora.

Edit.
Po prostu lay caly z tłem obrazkowym - jedna całość. Nie podzielony na warstwy, bo renderowany w 3dsmaxie.