Hi everyone. Newbie here with an issue..please help.

[rowdywolf]

Hi everyone. My name is Victor. I am in the process of making a html website for my gaming clan. The webpage has a several things effecting the situation..

1. page background

2. Gifs with transparency

3. animated gif

The normal gifs is located on the left and right side(mirror image of each other) of a table. I am trying to place the animated gif into the same areas, so that the animation is viewed through the transparent sections of the normal gif(basically behind). I am having issues doing this because I am not any good at doing this. I see what works and if it doesnt, I try something else. But this isnt working, so I could really use some help. Here is a screenshot of what the page looks like.

The 2 big black boxes towards the top is where I am wanting to place the animated gif.

Thanks guys!!

 

[PixelPusher]

... I am trying to place the animated gif into the same areas, so that the animation is viewed through the transparent sections...

Set the static images as the background of that element, and then add the animated gifs (which would need to have a black bg if they are too look like they are inside the "hole" shapes) inside the same div. You will need to know some css to make this work. what is your skill level?

Example:

CSS

div.leftside {
background: url(images/leftimage.gif) center no-repeat;
width:100px;     /* WIDTH OF STATIC IMG */
height:100px     /* HEIGHT OF STATIC IMG */
margin:0;
padding:0;
}

div.leftanim {
position:relative;
top:10px;     /* ADJUSTS THE VERTICAL POS */
left:10px;     /* ADJUSTS THE HORIZ POS */
margin:0;
padding:0;

HTML

<div class="leftside">
   <div class="leftanim">
       <img src="http://www.webdesignforum.com/images/animatedgif.gif" alt="" />
   </div>
</div>

Just a side note....why have a static gif and then an animated one placed over the top? why not just make the animated one have the same static areas (frame)?

Good luck.

 

[bren2010]

Have you tried using CSS's z-index and absolute positioning?