Graphic that shows through text box on a form

At http://www.itv.com/ they have a text box that forms part of a search
facility - but the text box has a visible graphic behind it.

When I put a text box in a form, it obliterates any graphics behind it.

I have not seen this on any other site - does anyone know how it's done?

D.

David Wright wrote:

At http://www.itv.com/ they have a text box that forms part of a search
facility - but the text box has a visible graphic behind it.

When I put a text box in a form, it obliterates any graphics behind it.

I have not seen this on any other site - does anyone know how it's done?

A background image can be applied to an input box just the same as it
can be applied to any other element, via the CSS background-image
property.

You can also make a parent element's background show through by setting
the background property to transparent.

Simple demo: http://steve.pugh.net/test/test101.html

Be careful when setting backgrounds on form elements as anything that
makes it even slightly more difficult for the user to see what they're
typing is any obvious problem.

I can't be bothered to dig into the code of the ITV site, they write
the serch form into the page with JavaScript which shows just how
clueless they are.

Steve

Simple demo: http://steve.pugh.net/test/test101.html

Just the job - many thanks.

D.