Картинка и фон со сдвигом

Коллеги, спасите, на меня напал суровый тупняк!

Нужно выводить картинку через тэг img, под этой картинкой нужно расположить фон со смещением. В зависимости от местоположения элемента на сайте, фон должен смещаться по-разному(справа, слева, по углам и т.д.).

Логика подсказывала нужные действия, вроде получалось, но в адаптивных вариантах всё разваливалось. Совсем в мобильной версии я этот фон отключить хочу(тут меня заклинить не должно ).

 

Все модификации испробованного кода выложить не могу, но html суть такая:

Код:

<div class="block-picture">
   <img src="first.jpg">
   <div class="block-gradient-top-left"></div>
</div>
<div class="block-picture">
   <img src="first.jpg">
   <div class="block-gradient-top-right"></div>
</div>

Позиционирование в css, естественно, использовал, но судя по всему где-то допускал ошибку.

 

Вот постоянно такая хрень - стоит только обратиться к помощи, так сразу расклинивает мозг.
block-picture - relative
gradient - absolute и з-индекс снизу
картинка - relative и з-индекс сверху

Я, судя по всему, в вечернем тупняке, гонял между собой градиент и картинку, а про внешний блок забыл, поэтому позиционирование часто получалось относительно экрана.