HTML textarea text input field background image

 For the HTML textarea text input field background image, you can use the background-image background image property of css , usually with the width and height properties of the textarea , to avoid the situation that the background image and the textarea are out of shape , this introduction will show you how to replace textarea join syntax and examples background image effect, so that the original bland textarea become more texture number, almost all major browsers support such an approach.

HTML textarea text input field background image example

<textarea style="background-image:url(background image);width:600px;height:400px;">
Please enter text here...
</textarea>

Rendering effect

The focus of the example is the style grammar in the textarea at the beginning . First, background-image is used to set the attributes of the back image. The position of the image is in the url brackets (that is, the URL. It is best not to use an external image file to avoid unexpected damage. Image now), and then set the width to 600px (width: 600px;) and the height of 400px (height: 400px;). This setting is because the background image has the same specifications, so that the prepared background image can be filled perfectly For the entire textarea text input field range, if you are not familiar with the textarea text field syntax or CSS background-image property usage, please refer to these two articles.

• HTML textarea text field
• CSS background-image background image

There are several important points to pay attention to when using background pictures. First, you must not pirate pictures on the Internet at will, and respect the intellectual property rights of others. Second, it’s better not to be too eye-catching on the background pictures. The fade effect or texture picture will be better than not processing at all. The photo is suitable, because a photo that is too clear makes it easy for netizens to feel uncomfortable when filling in the text, and even give up filling out. Finally, if you think it’s too much trouble to use a background picture and you have to prepare the picture yourself, it’s better to change the background color directly to be more efficient. You can refer to this introduction.

• HTML textarea text input field background color .

Whether you modify the background image or background color of the textarea, you should try to match the overall web page style.