# Transparent Text Area



## Ferretloafer (Jun 11, 2007)

I was wondering how to make a text area semi-transparent or be able to adjust the opacity levels so that the background image is visible.


----------



## Shadow2531 (Apr 30, 2001)

The background image should show through the textarea automatically, but here's how you can mess with the opacity.


```
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Transparent Textarea</title>
        <style>
            textarea {
                background-color: #fff;
                background-image: url(http://www.google.com/images/logo.gif);
                width: 276px;
                height: 110px;
                font-weight: bold;
                color: #ff9900;
                font-size: 1.4em;
                opacity: .50; /* Standard opacity property */
                filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE opacity property */
                /* reducing the opacity will also make the textarea text become transparent */
            }
        </style>
    </head>
    <body>
        <p><textarea>You should see the Google image behind this text.</textarea></p>
    </body>
</html>
```


----------



## dudeking (Feb 7, 2007)

overflow:none;
border:0px;

Will neaten the edges up abit as well


----------

