Introduction
Ever wanted to dim the background of an HTML page, and the only code you can find is all based off IE's CSS Filters? I wanted to make a cross-browser solution to this (and go easy on me.. this is my first post.. he he).
Setup
First, you'll need to make sure the body of the HTML can be 'seen' by the code. We do this by adding an ID
to the body
tag:
<body id="ReportBody" MS_POSITIONING="GridLayout" runat="server">
Now we need to make a GIF. The Gradient.GIF is nothing more than a 4x4 pixel with an alternating transparent pixel and a color pixel. Normally, I use light gray for the color pixels.
Code
There's two ways to change the background. If your class has the form in focus, you can just call the style change directly with something like this:
myBody.Style.Add("background-image", "url(images/gradient.gif)")
If you want to turn off the gradient, then just replace the background with what ever you had set before.
This example just turns off the background image, defaulting the page back to the default background color.
myBody.Style.Add("background-image", "")
Expansion
You could expand on this simple code to perform some really cool 'tricks'. Some ideas would be to dim the background and then create a floating DIV
to allow for data entry or information.
How about popping up a process bar while the site is grabbing information off a database?