FREE Hosting!

With every domain name you register with ZappyHost, you get FREE hosting.

$1.99 Domain Names

With every new non-domain purchase thru ZappyHost, you get a domain name for only $1.99.

Comment Box Pictures

Related:
• Comment Box Code
• Comment Box Colors
• Comment Box Borders
• MySpace Comment Box Code
• MySpace Comment Box Generator
• Form to Email Code
• Add Comments to Website

This page contains examples of comment boxes with background pictures. Feel free to copy and paste the code for your own use.

MySpace Users: If you need a comment box for your MySpace profile, use the MySpace comment box code.

Adding a Background Picture

In this example, I've added a background image to my comment box. This is done by using the background property.

Copy the following code:

<!-- HTML codes by Quackit.com -->
<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:330px;height:221px; background:url('http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg');">
Enter your comments here...

...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/myspace/codes/">MySpace Codes</a></p>

Result:

You can easily resize the comment box to fit your picture - just look for the width and height properties in the code.

Text Color/Size

Depending on your background image, you might need to change the color and/or size of the text so that it's readable.

In the following example, I've changed the color and size of the text. I've also changed the font to a generic "cursive" font. You'll notice that to do this, I've applied the font property and color property to the textarea tag.

Copy the following code:

<!-- HTML codes by Quackit.com -->
<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:330px;height:221px;font:30px/40px cursive;color:#ffffff; background:url('http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg');">
Enter your comments here...

...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/myspace/codes/">MySpace Codes</a></p>

Result:

Choose your colors with the HTML color picker.
To learn more about changing fonts, text color, etc, check out the CSS text section of the CSS tutorial, and the font code page.

More Comment Box Tricks!

You can also...

Enjoy this website?

Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/html/codes/comment_box_pictures.cfm">Comment Box Pictures</a> from Quackit.com
Add this page to your favorite social bookmarks sites:
Add this page to your Favorites