GeekZilla
Adding a transparent background to a Vista Gadget
Adding a transparent background to a gadget is easy! Simply create a transparent .png file and reference it from your Gadget HTML.
Here is an example file (also attached to this article as a download):
Here is the HTML you need to use it:
<g:background id="background" src="background.png" style="position:absolute;top:0;left:0;z-index:-999;no=repeat;" />
Full Example
Download the code at the bottom of this article.
<html> <head> <title>Hello, World!</title> <style> body { margin: 0; width: 130px; height: 200px; color: #ffffff; } #gadgetContent { width: 130px; top: 24px; text-align: center; position: absolute; font-family: Verdana; font-size: 10pt; } </style> </head> <body> <g:background id="background" src="background.png" style="position:absolute;top:0;left:0;z-index:-999;no=repeat;" /> <span id="gadgetContent"> Hello, World! </span> </body> </html>
Author Paul Hayman
Paul is the COO of kwiboo ltd and has more than 20 years IT consultancy experience. He has consulted for a number of blue chip companies and has been exposed to the folowing sectors: Utilities, Telecommunications, Insurance, Media, Investment Banking, Leisure, Legal, CRM, Pharmaceuticals, Interactive Gaming, Mobile Communications, Online Services.
Paul is the COO and co-founder of kwiboo (http://www.kwiboo.com/) and is also the creator of GeekZilla.