Question

I’m trying to make a div formatted like the following:

Loading XYZ Data .... [loading image]

Then later when the data has been loaded, then I want to switch the css class to something else, and result in:

Loading XYZ Data .... [green checkbox image]

How can this be done? Currently I’m doing this:

.loading
{
    background-image: url(images/loading.gif);
    background-position: 100% right;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

However the image doesn’t show up next to the next where I want it to. Any ideas?

Answer 1

You can use something like this:

span.bg_square
{
    display: block;
    background-image: url(http://www.vesivus.com/minis/little_square.gif);
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 20px;
    width: 70px;
}

Example here.