30
May
I recently stumbled across the Bargain Booze website, and was instantly taken with the animated backdrop.
When I found it to be a Flash animation I was further impressed. Not only did I want to know how to use Flash scenes as a backdrop, I wanted to find a way to tie those backdrops to the bottom of the browser window.
Ignoring the Flash for just a moment; the object of this exercise is to position content at the bottom of the browser window and have it remain there, regardless of resizing or scrolling of the window; without Javascript. It can be done but it requires a few workarounds but it’s about the most elegant solution I’ve seen thus far.
<style type="text/css">
<!--
*{
margin: 0;
padding: 0;
}
#a_box {
position: absolute;
bottom: 0;
width: 50px;
height: 50px;
background-color: #99CC00;
}
-->
</style>
<body>
<div id="site_container">
<p>Blah, Blah, Blah...</p>
</div>
<div id="a_box"></div>
</body>
The code above does nothing very exciting. When rendered in any browser we see a window with some text at the top and a green box stuck to the bottom of the window. Resize the window and the green box moves around as we would want. Great, job done? No.
Shrink your browser window so that it doesn’t accommodate the content (in other words until a scroll bar appears) and then scroll. That’s right, the green box remains where it was (or rather where the last calculated position of the viewport window was).
So, we turn to the lesser know position: fixed. This effortlessly ties the green box to the bottom of the browser where it remains. Update the CSS as follows.
<style type="text/css">
<!--
*{
margin: 0;
padding: 0;
}
#a_box {
position: fixed;
bottom: 0;
width: 50px;
height: 50px;
background-color: #99CC00;
}
-->
</style>
And everything works beautifully. The green box stays stuck to the bottom of the browser window regardless of what you do. However, this behavior is not available in Internet Explorer as IE does not support position: fixed. As irritating as this is, there is a way to accomplish the same.
html, body{
height: 100%;
overflow: auto;
}
By adding the styles above any absolutely positioned elements will exhibit fixed behavior in IE. The styles have to be declared on html as well as body. If you try applying them to just the body you will notice when the window shrinks below the content IE will have 2 vertical scroll bars. One greyed out and one active. Please do not ask me why this happens - I have no idea.
So, we need our bottom elements to be styled as fixed in everything but IE, where we require absolute positioning.
<!--[if IE]>
<style type="text/css">
#a_box{
position: absolute;
}
</style>
<![endif]-->
The above conditional statement (placed after the standard CSS) will re-declare the position attribute to absolute for the box div. The completed code will produce the green box correctly for IE, Firefox and Safari.
Returning now to the start of this exercise the aim was to place some Flash content into our newly positioned container and use it as a backdrop. If you take a look at the Bargain Booze website I previously mentioned you will see how the Flash backdrop sits behind the main content, and also moves dependent on the sizing of the window.
This means, regardless of the size of your browser window, you should always see some animation on your screen. To achieve the same, you simply need find a suitable animation to your liking and place it into the container div above. Adjust the dimensions and remove the background colour and also set a z-index value to ensure the container is beneath your content.
Voila, a nice Flash animated backdrop that moves and scales with your window. On the Bargain Booze website they have cleverly introduced a gradient fill which eventually matches the colour of the floating bubbles, giving the effect of the bubbles disappearing toward the top of the screen.