Как выделить текст под блоком?

Question

[Никита Литвинцев]

Имеются два блока и текст. Один блок с фоном на заднем плане, чуть выше текст и на переднем плане блок с фоном-картинкой (png), частично перекрывающей текст.
Как сделать так, чтобы пользователь мог выделять текст на сайте.

HTML примерно такой:

<div class="block__background-container"></div>
<h1>Text</h1>
<div class="block__background-container"></div>

Должно быть так, но с выделением

Comments

[Exploding]

Было бы интересно посмотреть хоть скрин какой-то чтобы понимать суть заморочки, а вообще если блок будет перекрывать частично, то выделять можно будет спокойно, но только "потянув" с того края где текст не перекрывается.
Может вынести h1 выше по z-index?

[Никита Литвинцев]

Exploding: Вот картинка, почему нужно, чтобы h1 была ниже блока. Пробовал выделять во все возможных браузерах, выделяет только по дабл-клику. Надо бы чтобы и обычным выделением.

[Exploding]

FerRun: Скорее всего ваша ПНГ-шная картинка на половину перекрывает h1.
Голубым - как наверно сейчас, зеленым: как надо сделать.
Сделайте так:

[Exploding]

FerRun: А вообще надо пробовать... Залейте куда-то кусок этот, а то по теории не очень удобно гадать

[Никита Литвинцев]

Exploding: она, к сожалению перекрывает полностью. Фоновая картинка такого плана - огромный прозрачный фон и человек. Картинка размером с ту, что на фоне. И выравниваются обе так

background-size: cover;
background-position: 50% 50%;

Как по-другому адаптивно под все экраны сделать подобную вещь не знаю. Блок высотой 100vh и во всю ширину.

[Никита Литвинцев]

Exploding: Не получается что-то кусок залить на codepen, слетает верстка там вся.

Answer 1

[Stalker_RED]

Для верхнего слоя установите pointer-events: none;
https://jsfiddle.net/rrwn8vnu/