WordPress.org

1. BunnyB
   Member
   Posted 3 years ago #

   Basically my post title says it all: I have a sparkly text gif I want to layer over a static image background. Is this possible in WP?

2. stvwlf
   Member
   Posted 3 years ago #

   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;

3. BunnyB
   Member
   Posted 3 years ago #

   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!

4. BunnyB
   Member
   Posted 3 years ago #

   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?

5. esmi
   Theme Diva & Forum Moderator
   Posted 3 years ago #

   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;
   }

6. BunnyB
   Member
   Posted 2 years ago #

   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?

Topic Closed

This topic has been closed to new replies.