Christmas For The Whole Family

The effect is made by varying the z-index value of the elements which determines the stacking order of the element. The higher the number the higher stacking order. The background was assigned z-index:-1;

The first order of business was to crop the top section of the background, make sections transparent and assign a higher number

<div id=tree-top>

<img src="http://www.geocities.ws/curlykid/xmas/winter-bush.png" width="1366" height="362" alt=tree>

</div>

#tree-top{position:absolute;left:0px;top:0px;z-index:3;}
 
and then but it back in using CSS

Then a number was assigned to the left sleigh

<div id=santa-l>

<img src="http://www.geocities.ws/curlykid/xmas/sleighride-left.gif?22" width="320" height"80" alt=sleigh>

</div>

* assigning? plus a number to and image url is a sneaky way of creating a new image on the same page. Very handy when editing.*

#santa-l{position:absolute;left:-320px;top:286px;z-index:2;}

The bridge has transparent squares cut out for windows

<div id=bridge>

<img src="http://www.geocities.ws/curlykid/xmas/sleigh-crossing.png" width=750 height=312 alt=bridge>

</div>



#bridge{position:absolute;left:480px;top:360px;z-index:3;}

Then my friend Tinkerbell

<div id=tinker>

<img src="http://www.geocities.ws/curlykid/xmas/tinkerbell.gif" width="100" height="120" alt=tinker>

</div

Stitched the whole kit and caboodle together.

Ted, that is an outstanding piece of work. Great job as usual.