Как покрыть изображение поверх блока с рамкой, при этом часть должна быть за пределами?

Question

[Иван Ильясов]

Не знаю, как правильно сформулировать вопрос.
В общем, ситуация такова, что надо как-то поверх блока сделать изображение, да так, чтобы половина была за пределами, а вторая половина в пределах блока и по центру. Как-то так:

Пример

Пунктиром выделены границы. Зеленым - блоки, которые должны быть поверх.

Не понимаю, как это реализовать. Знающие подскажите, пожалуйста.

Answer 1

[Максим Тимофеев]

.someclass {position: relative;}
.someclass .content { z-index:2;}
.someclass:before {
z-index:1;
content: ' ';
position: absolute;
height:200px;
top: -100px;
width:300px;
left: calc(50%-150px);
background: transparent url('/some/image/url/name.png') 50% 50%;
}

Comments

[Иван Ильясов]

gj, спасибо!