Textarea Alternate Row Colour

An example of how to create a textarea with each row a different colour, with expanding textarea height.

HTML

<div><textarea></textarea></div>

<!-- Alter the 'extraSpace' in the jQuery below to the 'line-height' in your CSS to keep everything in proportion to the background height -->

CSS

div {
    width: 300px;
    height: 112px;
    border: 1px solid #000;
    overflow-y: scroll;
    overflow-x: hidden;
}

textarea {
    width: 294px;
    height: 112px; /* Keep as a multiple of your background */
    background: url('http://i53.tinypic.com/7143gj.jpg'); /* Height 28px (14px blue / 14px white) */
    border: 0;
    padding: 0 3px;
    font-family: Arial;
    font-size: 0.7em;
    line-height: 14px; /* Half background height */
    resize: none;
    overflow: hidden;
}

JavaScript

/*
 * jQuery autoResize (textarea auto-resizer)
 * @copyright James Padolsey http://james.padolsey.com
 * @version 1.04
 */

(function($){
    
    $.fn.autoResize = function(options) {
        
        // Just some abstracted details,
        // to make plugin users happy:
        var settings = $.extend({
            onResize : function(){},
            animate : true,
            animateDuration : 150,
            animateCallback : function(){},
            extraSpace : 14,
            limit: 1000
        }, options);
        
        // Only textarea's auto-resize:
        this.filter('textarea').each(function(){
            
                // Get rid of scrollbars and disable WebKit resizing:
          
            
                // Cache original height, for use later:
                origHeight = textarea.height(),
                
                // Need clone of textarea, hidden off screen:
                clone = (function(){
                    
                    // Properties which may effect space taken up by chracters:
                    var props = ['height','width','lineHeight','textDecoration','letterSpacing'],
                        propOb = {};
                        
                    // Create object of styles to apply:
                    $.each(props, function(i, prop){
                        propOb[prop] = textarea.css(prop);
                    });
                    
                    // Clone the actual textarea removing unique properties
                    // and insert before original textarea:
                    return textarea.clone().removeAttr('id').removeAttr('name').css({
                        position: 'absolute',
                        top: 0,
                        left: -9999
                    }).css(propOb).attr('tabIndex','-1').insertBefore(textarea);
                    
                })(),
                lastScrollTop = null,
                updateSize = function() {
                    
        ...