Possible to layer animated gif over jpg header?

yes, that is a HTML/CSS thing, not a WP thing.

use absolute positioning…

In your stylesheet, assign position:relative to the Div that is the container for the whole header area. Important to do this step!

In your WP header.php file, within that container div create code
<div id="gif"></div>
that becomes the container for the new gif file

create CSS in the stylesheet

#gif {
  height: 100px;   /* use the actual height of the gif */
  width: 400px;   /* use the actual width of the gif */
  background: url(images/mygif.gif) no-repeat; /* use your filename */
  position: absolute;
  top: 0px;
  left: 0px;
}

Save the CSS.

Place the GIF file in the images folder below your theme’s folder.

refresh the browser and look at your page. You will see the GIF in the upper left hand corner.

adjust the settings for top and left until the GIF is positioned where you want it. To move it 100 pixels left, set left to left: 100px;

Hey, thanks for the great instructions! I will try this tomorrow when I’m more awake and see how it goes.

I appreciate your help!

Hmm, I have the header showing up but not the gif in front. Here’s what I have in header.php:

<div class="Header">
 <div class="Header-jpeg">

<div id="gif"><img src="animated-header-front.gif" />
</div>
</div>

And here’s what’s in my stylesheet:

/* begin Header */
div.Header
{
  margin: 0 auto;
  position: relative;
  z-index:0;
  width: 898px;
  height: 150px;
}

#gif {
  height: 898px;   /* use the actual height of the gif */
  width: 150px;   /* use the actual width of the gif */
  background: url(images/animated-header-front.gif) no-repeat; /* use your filename */
  position: absolute;
  top: 0px;
  left: 0px;
}

div.Header-jpeg
{
  position: relative;
  z-index:-1;
  top: 0;
  left: 0;
  width: 898px;
  height: 150px;
  background-image: url('images/header-background.jpg');
  background-repeat: no-repeat;
  background-position: center center;
}
/* end Header */

I’m sure I’m missing something obvious, because I am not so good with css yet. Can someone set me straight?

Try:

#gif {
  height: 898px;   /* use the actual height of the gif */
  width: 150px;   /* use the actual width of the gif */
  background: url(images/animated-header-front.gif) no-repeat; /* use your filename */
  position: absolute;
  top: 0;
  left: 0;
  z-index:500;
}

I’m back! Thank you very much for the z-index reminder, that brought the gif to the front. I still have weird things happening, though. Here’s my css:

div.Header
{
  margin: 0 auto;
  position: relative;
  z-index:-1;
  width: 898px;
  height: 150px;
}

div.Header-jpeg
{
  position: relative;
  z-index:0;
  top: 0;
  left: 0;
  width: 898px;
  height: 150px;
  background-image: url('images/header.jpg');
  background-repeat: no-repeat;
  background-position: center;
}

#gif {
  height: 167px;
  width: 150px;
  background: url(images/sparkle-test.gif) no-repeat;
  position: absolute;
  top: 0;
  left: 50;
  z-index:500;
}

And here’s what’s in header.php:

<div class="Header">

<div class="Header-jpeg">
<div id="gif"></div>
</div></div>

(I’ve changed the file names so the background is header.jpg and the animation is sparkle-test.gif.)
Here’s the link
Try to get past the fact that the animation itself is HIDEOUS! It was just a quick test. The “s” is cut off the word “clothes,” and I can’t get it to move to the right. Any idea what I’m doing wrong?