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 |
| Published |
: Wednesday, 30 May, 2007 |
Paul is the COO of kwiboo ltd consultant and has more than a decade of 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.