{"id":1954,"date":"2012-05-18T11:48:56","date_gmt":"2012-05-18T09:48:56","guid":{"rendered":"http:\/\/www.nyamsprod.com\/blog\/?p=1954"},"modified":"2012-05-18T15:41:10","modified_gmt":"2012-05-18T13:41:10","slug":"background-image-and-textarea","status":"publish","type":"post","link":"https:\/\/nyamsprod.com\/blog\/background-image-and-textarea\/","title":{"rendered":"Background Image and Textarea"},"content":{"rendered":"
\n

Attention:<\/strong> Les informations de ce billet sont susceptibles d'être obsolètes car vieux de plus 2 ans.<\/p>\n

Warning: <\/strong> The information you are reading may be obsolete, this post was published more than 2 years ago.<\/p>\n<\/div>

Using a single background image on a textarea<\/code> to change its presentation is no so trivial after all. Modern browser engine (Gecko and Webkit, for now) allow textarea<\/code> 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.<\/p>\n

To start with, here is a simple rule that should work on any browser (IE8+).<\/p>\n

textarea {\r\n\t-moz-box-sizing:border-box;\r\n\tbox-sizing:border-box;\r\n\twidth:276px;\r\n\theight:172px;\r\n\tpadding:20px;\r\n\toverflow:auto;\r\n\tborder:none;\r\n\tbackground:#fff url(background.png) no-repeat center scroll;\r\n}<\/pre>\n
The problem with this rule is that in modern browsers you can resize the textarea<\/code> 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<\/code>.<\/p>\n
using CSS3 resize property<\/h2>\n
If you don’t want your user to break your design by resizing the textarea<\/code> the simplest solution it’s to disallow the resize through CSS. this solution is simple, effective and backward compatible. The only problem with this solution is that you remove a very handy functionality from your website only because you don’t know how to work with it \ud83d\ude41 .<\/p>\n
textarea {\r\n\t-moz-box-sizing:border-box;\r\n\tbox-sizing:border-box;\r\n\twidth:276px;\r\n\theight:172px;\r\n\tpadding:20px;\r\n\toverflow:auto;\r\n\tborder:none;\r\n\tbackground:#fff url(background.png) no-repeat center scroll;\r\n\t-moz-resize:none; resize:none;<\/em><\/strong>\r\n}<\/pre>\n
using CSS3 Background module<\/h2>\n
My first attempt to find a simple solution to my problem was to use the CSS3 property: background-size<\/a>. Which means that I just had to add a new property to my rule.<\/p>\n
textarea {\r\n\t-moz-box-sizing:border-box;\r\n\tbox-sizing:border-box;\r\n\twidth:276px;\r\n\theight:172px;\r\n\tpadding:20px;\r\n\toverflow:auto;\r\n\tborder:none;\r\n\tbackground:#fff url(background.png) no-repeat center scroll;\r\n\tbackground-size:100% 100%;<\/em><\/strong>\r\n}<\/pre>\n
In doing so, I know that my image will automagically<\/em> adapt to the textarea<\/code> resize. But I’ve introduced a new problem, the image ratio is never preserved which means that on resize, the image can be deformed and the result is not quite what I wanted. So even if this solution works and is backward compatible, the result is not great. So my suggestion is to avoid this technique. You may try to work around the problem using the min\/max-height properties as well as the min\/max-width property to further style the textarea in modern browser.<\/a> But the loss of ratio is too important to be overlooked.<\/p>\n
Using CSS3 Border module<\/h2>\n
Since I was not happy with this method, I tried another approach by using the CSS3 border module property: border-image<\/a>. With this property, the image is sliced and repeated on the tag border following some specific rules<\/a>. So whenever you resize the textarea<\/code>, the image ratio remains intact and you finally get the resulting effect you wanted. You may think that everything is fine … but wait , this is CSS3 we’re talking about.<\/p>\n
textarea {\r\n\twidth:276px;\r\n\theight:172px;\r\n\toverflow:auto;\r\n\tborder-width:5x;\r\n\tborder-type:solid;\r\n\tborder-color:transparent;\r\n\t-webkit-border-image:url(textarea.png) 5 repeat;<\/em><\/strong>\r\n\t-moz-border-image:url(textarea.png) 5 repeat;<\/em><\/strong>\r\n\t-ms-border-image:url(textarea.png) 5 repeat;<\/em><\/strong>\r\n\t-o-border-image:url(textarea.png) 5 repeat;<\/em><\/strong>\r\n\tborder-image:url(textarea.png) 5 repeat;<\/em><\/strong>\r\n\tbackground-color:#fff;<\/em><\/strong>\r\n}<\/pre>\n
Some points to consider:<\/p>\n