Problem rotating & fading header images and overlay header image
 

I have 3 images that I use as header images and they are positioned at top left.
I used the Overlay Header Image to put our logo over the header image and let it float:right.

Now, I would like to let the 3 images rotate and also let them use the fade in/out.
So, I put the rotate time to 5 seconds and the face in/out to 2 seconds.

Result: the logo is gone; the images do rotate, but the first image keeps kinda hovering in the background, meaning that while the second image is visible, you can still lightly see the first image behind it as if the second image is somehow a little transparent.

If I remove the fade in/out the logo returns, but in FF there is no rotating anymore (there is in IE).

I have just started using Atahualpa and I'm kinda at a loss now as to what to do.

Can someone please help me out?

If explained well, I can adjust php code if necessary, though I'm no expert at it.

see the FAQ How To: keep a logo or text over the header image when using fade in/out

Thank you Juggledad.
I have put in the code you explained, but it is not working.
The logo is still not visible and the header images keep appearing over each other.
This is my div:

<div class="my_codeoverlay"><img src="http://mydomain.com/wp-content/themes/atahualpa/images/logo.png" /></div>

in which I have changed "mydomain" into our domain.
The CSS insert I have inserted literally as you said in the other thread.

what version of atahualpa and WP?
what is teh url?

WP version 3.4.1
AT version 3.7.7

Link: http://www.marktmonitor.com/wordpress/

go back and read and follow the instructions in the thread I pointed you to

I did follow the instructions, but I saw I missed a folder in the address of my logo, so the logo is showing now.
I also played with the values to get it in the right spot, but I run into a new problem here.
Our logo should be aligned on the right. I know I can play with the amount of pixels to shove it to the right, but when it shows correctly on my screen, doesn't mean it shows correctly on another screen.
So is there a way to make the logo align to the right side of the website?
I tried changing 'absolute' to 'right' and also tried to change 'left' into 'right', but you probably already know that that doesn't work.
I've now put in a percentage after 'left' instead of a fixed amount of pixels, but that also isn't the solution I'm looking for.
Is there a way to fix this?

This is a prime example of why you should learn to use the FireBug extension in FireFox - so you can see teh CSS and change it and see the results on the fly. It should take you a very short time to figure out what CSS to use this way.

ok, I will look into it when I'm back at work again.

Meanwhile I still have the problem of the different images in the header that shine through each other.
I'm guessing that's not a CSS problem.
You can see that the trees on the right of the one image shine through on the next; or the puzzle pieces shine through on the other image.
How can I fix that problem?

make all your images at least as wide and high as you define yout page width and image height