Form and input background image

Web forms are really useful, but can be very boring. Add a little something extra to your web site by giving form input boxes a background image like the example below.




To do this add the code in bold from below to your input boxes, and change http://www.giantmouse.co.uk/images/input_bg.jpg to the location of the image you wish to display.

<form>
<input type="text" style="background-image: url(http://www.giantmouse.co.uk/images/input_bg.jpg); border: 1px #ccc solid;"/><br /><br />
<input type="submit" value="search" />
</form>

More web design tips