La imagen de fondo de TextArea desaparece detrás de la barra de desplazamiento - html 5

I am facing an issue with back ground image in ie8. Here is the html page. I am testing in ie8.

<!DOCTYPE html>
<html>
<HEAD>
    <TITLE>Test background icon</TITLE>
    <STYLE type=text/css>
        .ctNewIconOnlyTxt {
            background: url('images/icons/icon_test.gif') right top no-repeat !important;
            background-color: #F2F2F2;
            padding-right: 16px;
        }

    </style>
</HEAD>
<BODY>
    <LABEL>Description </LABEL>
    <TEXTAREA style="WIDTH: 565px; HEIGHT: 83px;"  
            class="ctNewIconOnlyTxt" >testing for star icon for new 
            </TEXTAREA>
</BODY>
</html>

The problem is that background image is hidden behind the scrollbar of the textarea. if I remove the DOCTYPE html tag then the image is displayed before the scroll bar. Could some one explain to me what the problem is and what can be the workaround?

preguntado el 08 de noviembre de 11 a las 14:11

here is the demo:- jsfiddle.net/dev_tak/6AHNz/2 -

3 Respuestas

Sin DOCTYPE declaration, the web browser will render page in quirks mode. Which means different browser will interpret those tags in a not standard way, usually ending up messed up appearance.

The scroll bar should be on the top of the textarea background. (It is BACKground!)

If you want to hide the scroll bar, specify the scrollbar to be invisible.

textarea {
border : none;
overflow: hidden;
}

Otra forma es usar iFrame en lugar de TextArea.

respondido 08 nov., 11:18

Is there a way to specify the exact place in pixels for the background image. - impresionante

Here is what I did as a work around:

.ctNewIconOnlyTxt {   
    background: url('images/icons/icon_test.gif') 96% top no-repeat !important;
    background-color: #F2F2F2;
 }

Cambié el right keyword with percentage 96% in my case so as to display the icon and not get hidden behind the scrollbar.

respondido 08 nov., 11:20

A better work-around than setting the horizontal background-position to 96% is IMHO to place it at 100% and change (resize) the image itself to have the amount of pixels desired as a padding on the right hand side.

Respondido 18 Jul 14, 11:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.