Трехслойный каркас

Можно ли сверстать трехслойный каркас:

самый нижний слой - подложка с градиентом (outer)

сверху накладывается средний слой - состоит из двух фоновых картинок - одна вверху (header), вторая внизу (footer)

затем сверху слой прозрачный - на всю область накладывается текст (inner)

<div id="outer">

<div id="header"></div>

<div id="inner">

<p>...текст...</p>

</div>

<div id="footer"></div>

</div>

Можно ли так сверстать, чтобы текстовая область накладывалась на фоновые картинки?

На ум пока пришло решение с js - вычислить ширину слоя inner, который абсолютно позиционировать. И задать эту ширину слою outer за вычетом суммарной ширины обоих картинок в header и footer.