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:

    style="position:absolute;top:0;left:0;z-index:-999;no=repeat;" />

Full Example

Download the code at the bottom of this article.

    <title>Hello, World!</title>
            margin: 0;
            width: 130px;
            height: 200px;
        color: #ffffff;
            width: 130px;
            top: 24px;
            text-align: center;
            position: absolute;
            font-family: Verdana;
            font-size: 10pt;
    style="position:absolute;top:0;left:0;z-index:-999;no=repeat;" />
    <span id="gadgetContent">
        Hello, World!
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 ( and is also the creator of GeekZilla.

Add Comment


Your comment has been received and will be shown once it passes moderation.