Text AND background-image on input[type='submit']

Question

`<input name="submit" type="submit" value="Search" class="button search">` Is it possible to apply a CSS gradient using `background-image:` and still show the text contained in the `value` attribute? When I add a background-image it hides the text. Any help much appreciated EDIT Here are the computed styles to match the markup ``` -webkit-appearance: none; -webkit-background-clip: border-box; -webkit-background-origin: padding-box; -webkit-background-size: auto; -webkit-border-image: none; -webkit-box-align: center; -webkit-box-shadow: rgba(255, 255, 255, 0.701961) 0px 0px 6px 0px inset, rgba(0, 0, 0, 0.0980392) 0px 2px 3px 0px; -webkit-font-smoothing: antialiased; -webkit-rtl-ordering: logical; -webkit-transition-delay: 0s; -webkit-transition-duration: 0.30000001192092896s; -webkit-transition-property: all; -webkit-transition-timing-function: linear; -webkit-user-select: text; background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image:…

Accepted Answer

CSS

```
input {
background-color: #D28888;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#690707), to(#D28888));
background: -moz-linear-gradient(top, #690707 0%, #D28888 100%);
    border:none; padding:6px 12px; color:#fff; cursor:pointer
}
```

DEMO ​

By using `background-image`

```
input {
background-image: url(http://alanbooth.net/alap/images/gradient.bmp);
border:none;
padding:6px 12px;
color:#fff;
cursor:pointer
}
​
```

DEMO - 2

Text AND background-image on input[type='submit']

Solution

Problem