# Background gradient WITH an image

**URL:** <https://forum.kirupa.com/t/background-gradient-with-an-image/313872>\
**Category:** Uncategorized\
**Created:** [September 12, 2010, 8:14pm UTC](https://forum.kirupa.com/t/background-gradient-with-an-image/313872 "2010-09-12T20:14:32Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![NeoDreamer](https://avatars.discourse-cdn.com/v4/letter/n/ccd318/32.png) [@NeoDreamer](https://forum.kirupa.com/u/NeoDreamer)\
**Post date:** [September 12, 2010, 8:14pm UTC](https://forum.kirupa.com/t/background-gradient-with-an-image/313872/1 "2010-09-12T20:14:32Z")

</div>

Is there anyway to have both a background gradient and a background image on an text input tag? The gradient is for a caved in effect and the image is for a magnifying glass icon. I’ve tried several variations of the following CSS, but only succeeded on getting one or the other to show.

```php

#search {
   background: -moz-linear-gradient(top, rgba(255,255,255,0.6), rgba(255,255,255,0.8));
   background: url(magnifier.png) 2% 35% no-repeat;
}

```