CSS Background [Archive] - Dynamic Drive Forums

WattCode

07-27-2009, 01:32 PM

Thank you for your time reading this post.

I was wondering if there is a way (with CSS or some other language) to change my background color like this:

The first five seconds - gray.
The next 15 seconds - black.
Then make it stay gray.

If you have any ideas even beyond css please let me know.

Thank you.

coothead

07-27-2009, 03:43 PM

Hi there WattCode,

this will require a little javascript...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
body {
background-color:#999;
}
.black {
background-color:#000;
}
</style>

<script type="text/javascript">

var c=0;

function changeBg(){
if((c>5)&&(c<21)) {
document.body.className='black';
}
c++;
if(c>21){
document.body.className='';
clearTimeout(sto);
return;
}
sto=setTimeout(function(){changeBg()},1000);
}

if(window.addEventListener){
window.addEventListener('load',changeBg,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',changeBg);
}
}
</script>

</head>
<body>

<div></div>

</body>
</html>

coothead