Как поместить SVG за заголовок с помощью before?

Question

[MegaSanchez]

Как поместить свг изображение за заголовок. по такому примеру:


Вот пример моего кода: codepen.io/Aleksanchez/pen/XKNgYK

Правда, не знаю, как в кодпене создать правильный путь к свгшке. Но мне надо, чтобы работало не в кодпене, а на сайте.

Answer 1

[HamSter]

В чем собственно проблема??!!

Есть 2 варианта реализации! К примеру 1 вариан

Суть в том, что фон помещается в псевдоэлемент :before и ему задается z-index: -1, либо h1 { ... position: relative; z-index: 100; ... }

Второй вариант заключается в инлайновом расположении svg. (Это если бы вы выложили хотя бы код svg, можно было бы показать).

Answer 2

[Minary]

Все работает. Добавил svg и позиционировал не через margin, а через left, top.

.h1:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -3rem;
    left: -50%;
    width: 30rem;
    height: 11rem;
    background-image: url(http://danielmall.com/articles/svg-workflow-for-designers/svg.svg);
    background-size: contain;
    background-repeat: no-repeat;
}