[CSS]3-częściowe tło z przeźroczystością. Opcje

[Sky_walker]

Usiłuję zrobić stronę gdzie tło będzie składało się z półprzeźroczystych obrazków z których środkowy będzie rozciągał się zależnie od ilości tekstu.

Całość powinna wyglądać tak:
-----
tło 1
-----
.
.
rozciągalne tło (2)
.
.
-----
tło 3
-----
^ NA tym tle powinien wyświetlać się tekst.

Jako, że tła są półprzeźroczyste nie mogę po prostu wstawić div'ów z ujemnym marginesem dolnym/górnym do środka div'a z tłem 2.

Ktoś mógłby poddać pomysł jak to zrealizować?

Próbowałem z czymś takim:

[HTML] pobierz, plaintext 
<div class="bg_top"> </div>
<div class="bg_middle">
aAa<br>
aaaaa<br>
aaaa<br>
aaaaa<br>
aaaa<br>
aaaaa<br>
aaaa<br>
aaaaa<br>
aaaa<br>
aaaaa<br>
aaaa<br>
aaaaa<br>
aaaa<br>
aaaaa<br>
aaaa<br>
aaaaa<br>
aaaa<br>
aaaaa<br>
aaaa<br>
aaaaa<br>
</div> <!-- </div class="bg_middle"> -->
<div class="bg_bottom"> </div>
[HTML] pobierz, plaintext 

i CSS:

Kod

.bg_top {
  background:       url('img/body_top.png') top center no-repeat;
  width:            1090px;
  height:           234px;
  margin:           0 auto;
}
.bg_bottom {
  background:       url('img/body_bottom.png') top center no-repeat;
  width:            1090px;
  height:           218px;
  margin:           0 auto;
}
.bg_middle {
  background:       url('img/body_mid.png') top center repeat-y;
  width:            1090px;
  margin:           0 auto;
  padding-top:      -224px;
  padding-bottom:   -208px;
}

Tylko... właśnie - ujemny padding nie działa. Z kolei jeśli wsadzę treść w div'a i jemu dam ujemne marginesy - bg_middle zaczyna nakładać się na bg_bottom i bg_top (co też odpada, bo tła są półprzeźroczyste).

Problem nie banalny... gdyby tła były zwykłymi JPGami to problemu by nie było - zasłoniłoby się jedno drugim i byłoby ok, ale tutaj... już tak prosto nie jest.
Bardzo proszę o pomoc....


~Sky

[erix]

Ujemny możesz dać najwyżej margin, ew. position: relative; top: -Ypx; left: -Xpx;.

Tak nawiasem, to po co chcesz ujemne dawać...?