Funny Background Trick With a Bug in Your Website

Halloween is coming, so be prepared with some jokes. You can add this realistic bug in your website to trick your visitors. Some of them might even believe that this is a true bug and start clean their monitors. Note that this gif image has white background, so be sure to blend it with your site's background.

To save this image right click and press save picture as option.

The best way to place this bug on your site is using css absolute positioning feature. 1. Put this code anywhere between your page's body tag: <body> <div id="apDiv1"></div> </body>

2. Place this code between style tags or in your stylesheet: <style type="text/css"> #apDiv1 { position:absolute; width:69px; height:85px; z-index:1; left: 90px; top: 41px; background: url(/bug.gif) no-repeat; } </style>

You can position this bug anywhere on your page altering width and height values without worry to harm layout. It won't happen because absolute positioning in css does not interact with any page element.

You can spice up your site with similar tricks in less than few minutes. Adding and removing these codes is easy and safe.

No comments: