2 tła w pudełku gradient Opcje

[stirith]

Mam takie "pudełko" jak poniżej

Widać że na górze i na dole jest inne tło (gradient)

Moje pytanie jak to wstawić do html-a ? Jedynie nasunęło mi się :

Kod

<div id="box">

</div>
<div id="boxBottom">

</div>

css:

Kod

#box
{
  background-image: url(images/topBox.png);
  background-repat: no-repeat;
  background-position: top;
  background-color: #414143;

}
#boxBottom
{
   background-image: url(images/BottomBox.png);
   background-repat: no-repeat;
}

Minus tego jest taki, jeżeli gradient z dołu jest duży to na nim już tekstu nie napisze...a oto chodzi żebym napisał, bez zbędnej gimnastyki, więc jak to zrobić ?

Pozdrawiam

(IMG:http://www.modlitewnik.com/imageBox.png)

[Crozin]

Kod

<div class="outer">
  <div class="inner">
    <p>tekst</p>
  </div>
</div>

Kod

.outer{
  background: #414143 url(...gora) repeat-x left top;
}

.inner{
  background: #414143 url(...dol) repeat-x left bottom;
}