[SOLVED] How to get a background image show thru background color
 

Ok, I'm still trying to get the header image change every N seconds. I got NextGen slideshow to show up by editing header.php but I couldn't get it to replace the header image, it shows on top or below depending on where I put the code and I couldn't get the blog title on top of it..

So I took another route. I found a java code snippet that will loop images from an array and I put it in HTML/CSS inserts --> HTML Inserts: Header (see code below) and added an 'onload="runBGSlideShow()" to teh HTML Inserts: Body Tag. Then I creaded a transparent gif, the height and width of the header and put that as the onl inage in the images/header folder.

Then I changed the 'Body, Text & Links -> Body Style' to have a :
background: #;

Wow, this works...almost. The image shows thru, but it is located at x=0 y=0 so it is offset from where the header should go and if I change the background to an actual color, the image is covered up. Sigh, so close and et so far... Any hints? (see http://zenofmud.org for example)

--------------
code snippet
--------------

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
// (C) 2001 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header

// =======================================
// set the following variables
// =======================================

// Set speed (milliseconds)
var speed = 7000

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'http://zenofmud.org/wordpress/wp-content/gallery/header_images/zom01.jpg'
Pic[1] = 'http://zenofmud.org/wordpress/wp-content/gallery/header_images/zom02.jpg'
Pic[2] = 'http://zenofmud.org/wordpress/wp-content/gallery/header_images/zom03.jpg'

// do not edit anything below this line

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runBGSlideShow(){
if (document.body){
document.body.background = Pic[j];
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runBGSlideShow()', speed)
}
}
// End -->
</script>
<style>
body{
background-repeat: no-repeat;
background-position: 200 100;
}
</style>

You could try to replace

with

and in bfa_header_config.php

change

to

Flynn, thank you, you pointed me in the right direction. I had to change my array entries to
Pic[0] = 'url(http://zenofmud.org/wordpress/wp-con...ages/zom01.jpg) no-repeat 50% 0%'
and I am able to get it working.

What happens now is that every 10 seconds (I upped the delay) the header image rotates to a new one!!

I'll write the whole procedure up and submit it later today when I get home, then, with my new found knowledge, I'll try to play with the Nextgen slideshow again (I like the smooth dissolves.

Flynn, thank you once again!!

ok, I've solved this and posted a 'how to' in post http://forum.bytesforall.com/showthread.php?t=1307
you can see the results at http://zenofmud.org