Styling Textarea with a Background Image

To ease the CSS readability I've removed prefixed rules from the code.

The Old Way

this should work on all browser but there's a rendering issue on modern browsers that support the resize attribute on the textarea tag

Of course, you need to adapt the width, height and padding according to your background image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras facilisis, arcu a varius auctor, nisl nunc blandit dolor, quis sodales dui eros quis diam. Phasellus vehicula mi sit amet libero fermentum tempor. Fusce rhoncus condimentum justo, vitae vehicula nisl feugiat non. Aliquam et mi mauris, eget tristique nisl. Fusce viverra venenatis auctor. Phasellus cursus venenatis varius. Duis lectus odio, interdum et suscipit faucibus, pulvinar in leo.

Nullam adipiscing, enim et molestie vestibulum, est risus dapibus mauris, eu mattis turpis nulla congue arcu. Pellentesque vehicula elit sed turpis hendrerit sit amet vestibulum nisi pretium. Praesent velit erat, porttitor eget varius et, fermentum eu purus. Etiam gravida ipsum non lorem lacinia dapibus. Aenean commodo lectus turpis. Quisque consequat, libero varius mattis viverra, erat dolor adipiscing neque, eget sagittis eros orci ac dui. Donec tortor velit, lobortis posuere convallis vel, congue porttitor metus. Phasellus quis nulla id augue sollicitudin viverra sit amet et est. Aenean et imperdiet diam. Cras gravida, lectus ac tempor posuere, mauris neque ornare est, et sollicitudin libero quam vestibulum risus. Donec tempor libero nec diam scelerisque at sagittis magna consequat. Quisque diam dolor, interdum quis consequat vehicula, egestas a felis. In ac risus porttitor quam volutpat semper sit amet non turpis.

Sed et leo enim, a scelerisque orci. Maecenas aliquam blandit ultricies. Ut iaculis pretium lectus convallis malesuada. Proin nec ligula nunc. Suspendisse posuere, odio quis tristique facilisis, arcu velit sodales arcu, eget gravida diam ipsum eget augue. Aenean porttitor porta elit ut adipiscing. Vivamus at sem in nulla scelerisque aliquam. Suspendisse sem purus, congue ut gravida vel, condimentum eget elit.

.simple { 
	box-sizing:border-box;
	width:276px; 
	height:172px; 
	overflow:auto;
	padding:20px;
	border:none;
	background-color:#fff;
	background-image:url(pattern.png);
	background-repeat:no-repeat;
	background-position:center;
	background-attachment:scroll;
}

First approach using `background-size`

This should work on IE9+ and in all modern browsers.

However It can not be tested in IE9 and Opera since they do not support the resize attribute on the textarea tag

On Firefox, Chrome and presumably Safari, you will notice a ratio problem as the textarea is being resized, this technique should therefore be avoided.

.size {
	box-sizing:border-box;
	width:276px; 
	height:172px; 
	overflow:auto;
	padding:20px;
	border:none;
	background-color:#fff;
	background-image:url(pattern.png);
	background-repeat:no-repeat;
	background-position:center;
	background-attachment:scroll;
	background-size:100% 100%;
}

Another approach using `border-image`

Currently works on Firefox, Chrome and Opera. The ratio is preserve, this is what we wanted!!

Since Opera does not support the resize attribute on the textarea tag, the effect cannot be tested in that browser.

On IE10- browser or older browser no background or border images are shown.

.border {
	box-sizing:border-box;
	width:276px; 
	height:172px; 
	overflow:auto;
	padding:0;
	border-style:solid;
	border-color:transparent;
	border-width:20px;
	border-image:url(pattern.png) 20 fill repeat;
}

Mixing all together to get a single solution that works everywhere

So if we merge everything we learn today we can set up a rule to apply to all the browser regardless of the version number.

Notice the scrollbar position when using background rules compare to when using the border rules

.full {
	box-sizing:border-box;
	width:276px; 
	height:172px; 
	overflow:auto;
	padding:0;
	border-style:solid;
	border-color:transparent;
	border-width:20px;
	border-image:url(pattern.png) 20 fill repeat;
	background-color:#fff;
	background-image:url(pattern.png);
	background-repeat:no-repeat;
	background-position:center;
	background-attachment:scroll;
}

Textarea & Background Image

The Old Way

First approach using background-size

Another approach using border-image

Mixing all together to get a single solution that works everywhere

First approach using `background-size`

Another approach using `border-image`