Денис Щетинин

Все понятно? Картинка имеет прозрачный фон, соответственно она занимает ВЕСЬ объем, но не ПОКРЫВАЕТ верхний бэкграунд.

Пользуюсь этим

что-то типа того https://codepen.io/aliencash/pen/EvwOKY?editors=1100

Градиент от прозрачного к < имя цвета > и обратно к прозрачному, например:

background: linear-gradient(to right, transparent 10%, red 30%, red 70%, transparent 90%);

Ну так и позиционируйте изображение относительно формы. Форме поиска (блоку в котором она находится) - position: relative, а изображению position: absolute. И дальше устанавливаете картинку куда надо.

Или просто установите форме/блоку формы background.

Изображение ??? Зачем ??? Это все добивается стилями.
Даже если вы хотите залить фон под формой изображением, что вам мешает ?? и вам ненужно будет парится по поводу ее позиционирования при ресайзе экрана. Но вопрос в другом: Правильное ли это решение ?? Так как если вы делаете адаптивный сайт то вам нужно в любом случае иметь несколько таких же фоновых изображений которые будут применяться в зависимости от экрана устройства ( не будет же на мобильном у вас такой блок ?? все поплывет просто )