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.

Add Comment

Name
Comment
 

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