Textbox Image

This page contains HTML code for background image to an HTML textbox. Feel free to copy and paste this textbox image code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.

Also, please consider keeping the link back to this website - if you do it will be very much appreciated!

Textbox Image Code

To add a background image to your textbox, use the CSS background-image property. You can also use the background shorthand property if you prefer.

Here's an example of creating a textbox image, using this image (without the black border):

And here it is as a (repeating) textbox image:

Source Code	Result
<!-- Codes by HTMLcodes.me --> <textarea rows="15" cols="40" style="background-image:url(http://www.htmlcodes.me/images/image-codes/repeat-image-1.gif);"> This HTML textbox has a repeating background image. </textarea> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/textboxes/textbox-image.cfm">Textbox image</a></p>	This HTML textbox has a repeating background image.

No-Repeat Image

In the above example, the background image repeats across the whole textbox, filling up the whole textbox. If you only want the background image to appear once (i.e. not repeat across the textbox), use background-repeat:no-repeat in the image code. Alternatively, you could just use the background shorthand property to set both values.

Here's an example using the background shorthand property:

Source Code	Result
<!-- Codes by HTMLcodes.me --> <textarea rows="15" cols="40" style="background:url(http://www.htmlcodes.me/images/image-codes/repeat-image-1.gif) no-repeat;"> This HTML textbox has a non-repeating background image. </textarea> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/textboxes/textbox-image.cfm">Textbox image</a></p>	This HTML textbox has a non-repeating background image.

More Background Image Codes

You can do more with your background images, such as specify exactly where it is positioned within your textbox, or set it to just repeat horizontally, etc.

To do stuff like that, check out these repeat image codes and these background image codes. (The codes at those pages can also be used on a textbox image).