Hey Julie,

What you've described is a common snag for beginners to the Connect! platform.  It may be possible to do custom backgrounds in the way you've described, but I'm not failiar with that method.  What I typically do is used stacked controls:

createView: function() {
        //self reference for object level manipulation
        self=this;
        //The button holds the rest of the elements.  NOTE that this is .element.Button and not control.Button or control.TextButton!
        //element.button does not have any of the typical styles associated with it
        this.controls.btn=new KONtx.element.Button({
            events : {                           
                onBlur : function(){
                    //use self to reference the object and set the src of the image accordingly.
                    self.controls.img.src='Images/btnbg.png';       
                },
                onFocus : function(){
                    self.controls.img.src='Images/btnbgOver.png';
                },
                onSelect : function(){
                    print('OOOOOOOOOOOOO');
                }
            },
            styles:{
                height:KONtx.utility.scale(88),
                vOffset:0,
                width:KONtx.utility.scale(97),
            }   
        }).appendTo(this);
        //The image is attached to the button.  It will display your background
        this.controls.img = new KONtx.element.Image({
            src:'Images/btnbg.png'
        }).appendTo(this.controls.btn)
        //The label for your text box.
        this.controls.label = new KONtx.element.Text({
            label:'Text!!'
        }).appendTo(this.controls.btn)
    },

Using this "stack" of controls, you can have buttons with a custom background.  Of course, if you're doing this a lot, you could make your own class based on this structure or by extending KONtx.control.TextButton