Steal this GIF
Stacking the Word Phrase GIF on top of the Background GIF

Example when combined

Select either a half banner (234 x 60) or a full banner (468 x 60) and save it to your website wherever you keep your images (i.e. images/). Then select the word phrase to be centered on the background and also save it in the same location. Do not hot link directly to the gifs on this site. They must be saved to your own server.

Code for the 234x60 should be in the following format. Copy this if you like. Just make sure the names of the the 2 GIFs are correct, & also the folder in which they're kept:

<div>
<img src="images/234x60bg-12.gif" width="234" height="60">
<img src="images/234x60-marbles-2.gif" width="234" height="60"
 style="margin-left:-234px">
</div>

The 1st image (img) in the code is the background; the 2nd image is the word phrase to be centered on that background. Note that both are enclosed inside the same div tags. The word phrase is offset to the left by its length so that it ends up centered on the background. This is done with the margin-left:-234px in the style tag. If you're using the 468px backgrounds and 468px word phases, it would be margin-left:-468px. If you're using the 234px word phrases with the 468px backgrounds, it would be margin-left:-351px (234 + 117). Note that these offsets are all negative amounts.


The above can also be accomplished by specifying the banner background URL using a style in the div tag like this:

<div style="background-image: url(images/234x60bg-12.gif); background-repeat: no-repeat">
<img src="images/234x60-marbles-2.gif" width="234" height="60">
</div>

If you're using a 234px word phrase with a 468px banner background, you'll want the word phrase moved to the right half the distance of the difference between the two (117px). You can do this with an added style on the word phrase image like this:

<div style="background-image: url(images/468x60bg-12.gif); background-repeat: no-repeat">
<img src="images/234x60-marbles-2.gif" width="234" height="60" style="margin-left: 117px">
</div>


Please, if you use any of the graphics, all we ask is that you might possibly add a small link somewhere on your website back to StealThisGIF.com. Here are a couple of small GIFs you can use. All you have to do is copy the code just below the GIF and paste it into your webpage, blog, forum, MySpace, etc.

Enough explaining. Have fun!

« Back to home page