Adding 2nd background

cnotethegr8 · 11-08-2009, 07:33 PM

right now im using this script as 'Wallpaper.html'

<?xml version="1.0" encoding="UTF-16"?>
<html><head>
<base href="Private/"/>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<style>
body {
background-color: black;
margin: 0;
padding: 20px 0 0 0;
height: 442px;
width: 320px;
}

img {
-webkit-transition-property: opacity;
-webkit-transition-duration: 2s;
position: absolute;
width: 320px;
height: auto;
}

img.fade-out {
opacity: 0;
}

img.fade-in {
opacity: 1;
}
</style>
</head><body style="color: black">
<img id="one"/>
<img id="two"/>
<script>
var images = ['BG1.png', 'BG2.png'];
var index = 0;

var fade_in = one;
var fade_out = two;

fade_in.src = images[0];
fade_out.src = images[images.length - 1];

var fade = function () {
fade_in.src = images[index];
index = (index + 1) % images.length;

fade_in.className = 'fade-out';
fade_out.className = 'fade-in';

var fade_tmp = fade_in;
fade_in = fade_out;
fade_out = fade_tmp;

setTimeout(fade, 5000);
};

fade();
</script>
</body></html>

it makes my background fade in and out, but the middle part of the image i do not want to fade. i would like to have a second background which would rest on top or behind (either way is fine because the section i want to not fade is transparent.)

let me know if you need pictures to understand. thanks!!

mr.reggaeton72 · 11-08-2009, 09:00 PM

yes, i need pics to understand, please...

cnotethegr8 · 11-08-2009, 09:52 PM

i figured it out, thanks