Блок с 2 bg

[inex]

Всем привет, есть вот такие блоки в макете, не могу придумать как реализовать   Изображение в бэкграунде смещено, при масштабирование не должно "съезжать", блок 100% ширины.

Есть идеи? Конечно можно картинкой весь блок вставить, но как-то жестко выйдет

 

 

[satantx]

http://jsfiddle.net/d5x2yaLv/

[inex]

Это всё ясно само-собой, не упомянул что интересует возможность решения задачи одним дивом, и картинка смещена от центра на N-ое расстояние(таких блоков много с разным смещением)

Edited January 28, 2015 by inex

[mrnobody]

http://jsfiddle.net/mrnobody/pgjfgzhs/

 

Или так:

http://jsfiddle.net/mrnobody/pgjfgzhs/1/

Фуллскрин:

http://fiddle.jshell.net/mrnobody/pgjfgzhs/1/show/

Edited January 28, 2015 by mrnobody

[inex]

Good job! Хотел с прсевдоэлементами поиграться, но было лениво Спасибо!

[kattiperk]

padding: 20px 20px 20px calc(50% + 20px);

 

помним, что сафариверсии 5.1 на виндовс такое может не посчитать

[mrnobody]

Можно все отодвинуть с помощью универсального селектора (*)

http://jsfiddle.net/mrnobody/pgjfgzhs/2/