Как обрезать div под разные размеры экрана?

В шапке сайта есть фоновый баннер. По моей задумке он будет подрезаться с левого края под разные размеры экрана — 1200, 900, 768 пкс.

Проблема решается, если картинку поставить фоном div’a всей шапки и выровнять вправо. Но сайт на Битриксе, поэтому баннер будет изображением внутри отдельного div’a. Хочу понять, как решить эту проблему аналогично просто.

Пробовал реализовать через clip:

@media screen and (min-width:992px) and (max-width:1219px){
.header__banner{clip: rect(0, 1200px, 200px, 300px); left:-149px;}
}

Получалось вот так.

Баннер фиксируется на одном месте, не замечая маргины всего сайта.

Что можете предложить?