Fading text over an image

[Cherubae]

Alright, 'nother weird question ...

I've used z-index to put a small little image underneath the text inside of a dhtml scrolling section on the page. Normally it just sits there all pretty but every so often the text on the page lines up right on top of the image, making it hard to read.

So I made a transparent 4x4 gif image with color in pixil 1, transparency in pixil 2, sort of like a checkerboard. Then put that image behind my text. Since the color of my new "background image" is the same color as my background color, it would blend in until it goes over the top of the problem image, then the new "background image" would be visible and the darker image would virtually fade into the same background color.

span.blue {background-color:transparent;
background-image:url(/hm4/img/span_background.gif);
background-repeat:repeat;
font-family:verdana, sans-seif;
color:#000000;
font-size:12px;
line-height: 1.3em;}

When put into the page it worked like a charm; made a nice little transparent blue color. I was happy. Until I tried to scroll the dhtml section and watched how my page screached to a snail's pace; the background image on all of the text was putting a pretty heavy load on my web browser. Once I took the "background image" off the text, the page was fine again.

So I'm looking for any suggestions that might lighten the web browser load problem. Or even another problem to make the text stand out over my one little image :)

[Roy Sinclair]

Try using a much larger image, at 4x4 pixels it's rolling through all the code for checking if the image is present/cached... for every 4 pixels in the area where you're using it. That would explain the slowness.