How to Make Your Ask Box a Picture on Tumblrby Nicole Martinez
Tumblr provides a blog-like interface where you can update your friends and re-post links, text or images from others' accounts. Although the website does not have a default commenting feature, you can communicate with other users via the "Ask" box, which allows users to ask questions that the site delivers to your dashboard for you to answer on your page.You can add a picture to your "Ask" box to customize it.
With CSS, you can customize the various elements of your "Ask" box. For example, you can use a patterned image that contrasts nicely with your theme behind the text area and "Submit" button. Because Tumblr provides you with an i-Frame code rather than the actual form code for your page, you cannot individually customize the form fields. For example, you cannot add an image specifically to the text area or replace the background image of the "Ask" box so that it displays something else.
To display a single image behind your "Ask" area, you must wrap the default I-frame code as provided by Tumblr within a div and then specific a background image for that div. For example:
<div style="background: url("http://domain.com/image.gif")"><iframe src="http://www.tumblr.com/ask_form/YourUserName.tumblr.com" id="ask_form"></iframe></div>
Remember to change the URL of the image to one that is hosted online. Sites such as Photobucket and ImageShack offer free hosting that you can use. Additionally, you must change "YourUserName" to your Tumblr name so that the Ask box refers to the correct user.
You can create a background image that will surround your "Ask" box and include borders around all the elements -- text box, button and log-in field -- to give the impression of a border, even though Tumblr does not allow you to actually customize those elements with CSS. To better align your background image with your I-frame, specify the height and width of both objects in CSS. You can also adjust the margin of I-frame, which is the space between its outer edges and the div; or you can adjust the padding of the div, which is the space between its inner edges and its content, to help with alignment.
When using an image as part of a form field, ensure that your visitor is able to read the text that he is typing. Using an image that is mostly dark and pairing with light text -- or the opposite -- is easier on the eyes than using a busy image with many colors. If you do not take this into consideration, users may feel frustrated at the appearance of your box and refrain from communicating with you on Tumblr.