Using a single background image on a textarea to change its presentation is no so trivial after all. Modern browser engine (Gecko and Webkit, for now) allow textarea to be resize by the user. This resize that I’ve already talk about in another post can easily break your design if you don’t adapt your CSS . Here’s a technique that I use to mitigate the new behaviour in modern browser.

To start with, here is a simple rule that should work on any browser (IE8+).

textarea {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	width:276px;
	height:172px;
	padding:20px;
	overflow:auto;
	border:none;
	background:#fff url(background.png) no-repeat center scroll;
}

The problem with this rule is that in modern browsers you can resize the textarea tag as you wish, which means that on resize my image design will break since the background image will not adapt to the resized textarea. (Lire la suite…)