Graphic that shows through text box on a form

[David Wright]

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.

 

[Steve Pugh]

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

 

[=?ISO-8859-1?Q?L=FCpher_Cypher?=]

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.

..itvYahooInput {width:376px;
background-image:url(http://www.itv.com/images/siteBuild_2005/logo_yahoo_search.gif);
background-repeat:no-repeat; background-position:center center;}

 

[David Wright]

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

Just the job - many thanks.

D.