"Cincada" background + Height 100%

Hi all,

I have a tricky problem. I’m trying to create a two-column, full-width header/footer page which has a “Cincada Project” style background (The Cicada Principle and Why It Matters to Web Designers » HTML & CSS, Layout » Design Festival).

The HTML is basically:

  <div id="b1">
    <div id="b2">
      <div id="wrapper">
        <div id="header">
        <div id="body">
        <div id="sidebar">
        <div id="footer">

Basically body, #b1, and #b2 all need to be height: 100% and each have a unique background assigned (for the Cincada project-style background).

#wrapper is where the page basically begins. It has a fixed width (750px), centered. #header and #footer go all the way across that width. #body is 550px and #sidebar is 200px.

Now, the part I’m having issues with is getting #wrapper to be 100% height and allow #body and #sidebar to stretch so they take up at least as much space to fill the screen. I can use the repeat-y background image technique.

It seems like the extra div layers are causing issues.

Any ideas?


I wouldn’t set a width on the body element like that. The idea of the cicada images is to have multiple images on the <body> element using the CSS3 multiple background image facility.

– edit – My bad, I thought the link was the page you were trying to fix since it’s completely busted and I’ve never heard of Insectoid images. Given the page you’re getting the information from is busted ass broken gibberish, whatever it is you are actually trying to do that’s NOT how you go about it.

Do you have a rough sketch of what you are actually trying to accomplish? Maybe meaningful markup with classes and ID’s a bit less vague than “b1” and “b2”?

The idea of the cicada effect was only published a month or so ago. Basically, using the multiple background facility of CSS3, you have a set of small bg images on the body that layer on top of each other to create a body background of seemingly endless variations. That’s because the bg images are arranged in mathematical patterns such as 1, 3, 7, 11, 13, 17 etc, so that they merge together in a large array of combinations. Very clever, really. They held a comp last month that produced some stunning background effects with just a few lightweight transparent images.

It’s called ‘cicada’ because it’s based on the observation that cicadas come out of the ground in varying cycles (I think based on prime numbers or something) to make it harder for predators to establish a pattern of eating 'em all up.

That article introduced the concept of “ruffle units”.


Looks like the OP is trying to use this technique, but with browsers who don’t support multiple background images. Which is probably how I’d do it as well, unless listing multiples has a default to the first or last listed image in older browsers. I’ve never checked.

So… you mean a non-linear progressive moiré pattern? They have a goofy new name for doing that now? Hell, I did that with two div ten years ago to explain what a moiré pattern was. Ah yes, everything old is new. Welcome to the worlds of windows 2.0 wallpapers (which let you put pattern OVER the bmp)

Ok, that makes it clearer what’s trying to be accomplished. Since all the outer containers end up 100% height… or should you be using min-height? The inner part shouldn’t be any different than any other fixed-height layout.

You post up the images you’re trying to use or a reasonable facsimile, I can slap together code to do that right quick.

When you say full width on the header and footer – is that just visual appearance as that width with the content on the flow width, or actually having the header’s content expand to that width as well?

I don’t think it’s the same as a moire pattern, but I need to refresh my memory about them.


For browsers that don’t cognize multiple bee gees (such as barry, robin, maurice) you declare a single image first. E.g.

background-image: url(barry.png);
background-image: url(barry.png),url(robin.png),url(maurice.png);

Arg, I thought so.

Would have been more awesome if browsers who didn’t support just grabbed one of the many you mention. One line of code for all : (

I am disappoint.

Basically body, #b1, and #b2 all need to be height: 100%

Unfortunately you can’t have multiple 100% high elements because that means they will never grow and will only ever be as tall as the viewport (assuming html and body were set to 100% to start with). They will just overflow when content exceeds the height.

You can’t use min-height:100% apart from on the first wrapper (#b1). Subsequent min-heights collapse to zero.

If you use height:100% or min-height:100% on subsequent wrappers then all you get is height:auto because you can’t base a percentage height on a parent that has no specific height defined.

That’s just the way CSS works unfortunately.

For IE8+ you could use height:100% on all wrappers as long as you first set display:table and then just like tables height is treated as a minimum and will expand if required (IE6 treats height like this anyway but IE7 won’t). Of course the elements need to all start and finish in the same place so no padding or borders or margins should affect the calculations.

For IE7 (or all if necessary) you could use the absolute overlay method as it is only backgrounds that you need to overlay and you can achieve multiple full length background with a bit of fiddling around.

Therefore it is possible to make multiple 100% high backgrounds but it does take a bit of fiddling around to accomplish. (Of course if you are using css3 multiple backgrounds then you do it all on the one element in most cases)

Thanks everyone.

Paul, that was kind of what I was afraid of… I was just hoping I was stupid. =p

I guess I’ll just go with multiple backgrounds, and then set the main background as the fail safe. It’ll still look pretty decent. The site is actually my personal one, which is going to be a partial experimentation ground anyways, so I don’t mind using some CSS3 on it. =p

(Also, just to note, I’m not setting a width on the <body>… already learned my lesson on that one. =p I’m setting it on a div with the id of #body… bad naming in my example. =p)