1

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Ciel
  • 17,312
  • 21
  • 104
  • 199

1 Answers1

3

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • +1... what? hum... nice one. But if we have transparent/opaque .png images... this might be a problem, right? And... aren't we hurrying with this extreme CSS3 specs having IE still on our back? – Roko C. Buljan Sep 18 '11 at 15:30
  • @roXon: Yes, that'll be a bit of a problem. There's a little trick I describe in [this answer](http://stackoverflow.com/questions/5427371/css3-multiple-background-images-and-a-background-color/5427455#5427455) that one could use depending on the situation... – BoltClock Sep 18 '11 at 15:32
  • +2..... :D CSS3 is becoming so powerful. but... Bolt... remember, *"With great power comes great responsibility"* :D – Roko C. Buljan Sep 18 '11 at 15:34
  • @roXon: Actually I have the same mindset of "don't use CSS3 like it's been finalized because it's not finalized yet", but the Backgrounds and Borders module is already a CR now, so unless you need to cater to certain browsers I guess you can get away with things like this. – BoltClock Sep 18 '11 at 15:34
  • Right. `$('input[type="button"]').click(function(){ $(Wwide_IE).remove(); });` – Roko C. Buljan Sep 18 '11 at 15:39