Extjs 4.2.2 - textarea中图像后面的可滚动文本

Question

I'm searching high and low to achieve what has been done in this fiddle: http://jsfiddle.net/wNTe6/1/

I need the same effect for an Extjs -Textarea.

(background-image seems to be outdated, I used an image-URL of a random-image)

I need a teaxtarea with a (background?-) image (center/middle) and text. The text should be scrollable, but has to disappear behind the image.

At the very moment, text is scrolling above my background-image (which is understandable).

My textarea (Extjs):

var txtField = Ext.create('Ext.form.field.TextArea', {
name: 'transitionTextArea',
width: transWidth,
height: 100,
border: false,
value: 'Transition Transition Transition Transition Transition Transition',
readOnly: true,
fieldCls: 'transition-style'
});

CSS-Class:

.transition-style {
background-image: url('../images/icons/processControl/transition_160x32.png');
background-repeat: no-repeat;
text-align: center;
vertical-align: middle;
border: 0px;
padding-top: 30px;
}

Can anyone please help me?

Any help would be highly appreciated!

-nemesis-

Answer 1

Well, I'll give it a shot, but it's not very elegant.

Here is the Fiddle .

Changes in HTML.

<div class='imgdiv'>
    <img src='http://minionslovebananas.com/images/check-in-minion.jpg' width='100' height='120'>
    </div>

Changes in CSS.

.imgdiv {
    margin: 40px auto;
    position: relative;
    top: 20%;
    left: 5%;
    border: 1px solid red;
    height: 120px;
    width: 100px;
        }

Make the outer div with the same height as the scrollable div, but slightly less wide to not cover up the scroll bar. Make its position absolute.

Insert the image in a div and make the div position relative, and you can move it around.

I'll bet someone can give us a nice ELEGANT solution.