Question

In CSS, we have always been able to utilize the idea of block models to create the whole ‘top-middle (tile)-bottom’ effect for things like borders, rounded corners, etc. For example..

#top { background-image: url('some-top-image.jpeg'); }
#middle { background-image: url('some-middle-image-that-tiles.jpeg') repeat-y; }
#bottom { background-image: url('some-bottom-image.jpeg'); }

<div id="top"></div>
<div id="middle"><!-- tons of content here --></div>
<div id="bottom"></div>

Not exactly valid code, but it illustrates the concept anyway.

I was wondering if there is a way to encapsulate this kind of logic into CSS3’s new ability to do multiple background images in a single style. Such that ..

.content {
   background: 
           // top image - top positioning
           // middle image - tiling, offset from top
           // bottom image - bottom positioning
}
<div class="content"><!-- Lots of Content --></div>

I have attempted to just type in the estimated values, but it does not seem to come out like I expect. I was wondering if someone with more experience could enlighten me on whether or not this could even be done, and if there are any known examples of it.

Answer 1

Specify the top and bottom images and their positions, then the middle one:

.content {
    background: url('some-top-image.jpeg') top no-repeat, 
                url('some-bottom-image.jpeg') bottom no-repeat, 
                url('some-middle-image-that-tiles.jpeg') repeat-y;
}

The middle tiling image is declared last so that the top and bottom images will be layered on top of it. Layering of multiple background images is done from the top down. See §3.1 Layering multiple background images of the Backgrounds and Borders module for more.