HTML Animated Backgrounds CSS Layer Position Tutorial Flash or Javascript How To
Learn to create cool animated backgrounds for your HTML CSS content containers or the whole page background. You can choose to use either Flash animations or Javascript animations. We apply strategic CSS to layer and position our elements just right to create the effect.
<!-- Lesson and Code By Adam @ www.adamkhoury.com -->
<!-- Video: http://www.youtube.com/watch?v=lWO35Oc_p3o -->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#animaBox{
background-color:#000;
width:550px;
height:200px;
}
#btmLayer{
position:absolute;
z-index:1;
width:550px;
height:200px;
}
#topLayer{
position:absolute;
z-index:2;
padding:15px;
color: #96E2FC;
width:520px;
height:170px;
}
</style>
</head>
<body>
<div id="animaBox">
<div id="btmLayer">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="550" height="200" id="animatedLayer" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="animatedLayer.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#000000" />
<embed src="animatedLayer.swf" quality="high" wmode="transparent" bgcolor="#000000" width="550" height="200" name="animatedLayer" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
<div id="topLayer">
<h3>Welcome to my website</h3>
My name is Adam Khoury and I am on a mission from God. I do not charge people money for elite web development lessons because I am aware that money is the root of all evil, and that a lust for money makes people do wicked things to one another. I am also very much opposed to patents as they hinder forward progress for the tribe as a whole unit and jeopardize its future. We must break certain cycles to have a future.
</div>
</div>
</body>
</html>
HTML Animated Backgrounds CSS Layer Position Tutorial Flash or Javascript How To