Advanced CSS Image Layering Part 1: Light-Weight, Variable Patterns

By using CSS image layering with multiple repeating images and transparency you can create a layered effect that will generate light-weight highly variable images and backgrounds.

(Author's Note: I've had 2 seperate issues with this post not displaying correctly because of posting problems. Sorry for the inconvenience.)

Lets look at a simple example that expands only on the horizontal axis:

The above image was created by layering the following 4 images (1.64 KB total):

  1. Building Bottom Image
  2. Building Top Image
  3. Building Colors 1
  4. Building Colors 2

This effect will expand to fill quite a large space with out repeating. The first exact match for building 1 would be 421 buildings later, though building 21(green) has the same door and windows as image 1(purple).You can figure out the multiples at which various image combinations will be repeated by calculating the LCM (Least Common Multiple) of the measurements of the images being combined.

I did the LCM calculations using units of 1 Building-Wide (1 BW) but you can use inches or pixels if you wish. Using this measure, the LCM of the building-tops (4 BW) and building-bottoms (5 BW) is 20 buildings wide(20 BW), so the door/window combinations will repeat every 20 buildings. Interestingly, if you increased the number of building-tops to 12 you would actually end up with less variation. Because the LCM of 4 and 12 is 12, the first buildings door/window combination would be repeated 12 buildings later instead of 20. Using this same method we can calculate the LCM of all images (4, 5, 7 and 3 BW respectively) to be 420 BW(2*2*3*5*7), so the first building will be duplicated 420 buildings later.

Now that you have a little background on the what we're doing lets look at the code.

HTML:

<div class="BuildingEffect">

<div><div><div>

</div></div></div>

<div>

CSS:

/*Set the default width/height for all the building-effect divs*/

div.BuildingEffect, div.BuildingEffect div,

div.BuildingEffect div div, div.BuildingEffect div div div

{

width:100%;

height:100%;

}

/*format the outer div*/

div.BuildingEffect

{

height:20px;/*overrides 100% height*/

background: url(layer1.gif) repeat-x;/*building bottom image*/

}

/*format the 1st inner div*/

div.BuildingEffect div

{

background: url(layer2.gif) repeat-x;/*building top image*/

}

/*format the 2nd inner div*/

div.BuildingEffect div div

{

filter:alpha(opacity=50);/*IE6 and 7*/

opacity: 0.5; /*Firefox 3.0*/

background: url(layer3.gif) repeat-x;/*primary coloring image*/

}

/*format the 3rd inner div*/

div.BuildingEffect div div div

{

filter:alpha(opacity=20); /*IE6 and 7*/

opacity: 0.2; /*Firefox 3.0*/

background: url(layer4.gif) repeat-x;/*secondary coloring image*/

}

So how does the code work? Well, the nested divs are set to fill the outer div completely and each div is set to display its background image with an appropriate level of transparency.

Now let's look at a larger pattern that expands on both the horizontal and vertical axis.

    This image was created using the following four images
  1. HorizontalColor1
  2. VerticalColor2
  3. HorizontalColor2
  4. VerticalColor

If you look below you'll see that the HTML is identical to the previous example and the CSS was only slightly modified. You'll notice that I replaced 'repeat-x' with 'repeat' which allows the images to fill both horizontally and vertically. I also replaced the image names and adjusted the transparency until I got the desired effect.

HTML:

<div class="BuildingEffect">

<div><div><div>

</div></div></div>

<div>

CSS:

/*Set the default width/height for all the building-effect divs*/

div.PlaidEffect, div.PlaidEffect div,

div.PlaidEffect div div, div.PlaidEffect div div div

{

width:400px;

height:222px;

}

/*format the outer div*/

div.PlaidEffect

{

filter:alpha(opacity=25); /*IE6 and 7*/

opacity: 0.8; /*Firefox 3.0*/

background: url(HorizontalColor1.gif) repeat;

}

/*format the 1st inner div*/

div.PlaidEffect div

{

filter:alpha(opacity=40); /*IE6 and 7*/

opacity: 0.4; /*Firefox 3.0*/

background: url(VerticalColor2.gif) repeat;

}

/*format the 2nd inner div*/

div.PlaidEffect div div

{

filter:alpha(opacity=70); /*IE6 and 7*/

opacity: .1; /*Firefox 3.0*/

background: url(HorizontalColor2.gif) repeat;

}

/*format the 3rd inner div*/

div.PlaidEffect div div div

{

filter:alpha(opacity=70); /*IE6 and 7*/

opacity: .3; /*Firefox 3.0*/

background: url(VerticalColor.gif) repeat;

}

Unfortunately any items or text placed within the innermost div will also appear transparent which makes it difficult to use this as a background. The only way that I know of to work around this is to fixed or absolute position your background and your content and z-index them so that your content appears above them.

In my next post I'll be applying these techniques to create light-weight textured diagonal gradients such as the one currently shown on my site.

You can use CSS image layer techniques in this way to create interesting, scalable, non-repeating or highly-variable images and backgrounds. I think I'm the first to demonstrate this technique, but it's so hard to be original these days; in any case I hope that you'll have as much fun as I've had finding interesting ways to use this.

0 comments: