Как добавить надпись на цветной фон?

Question

[Сергей Золотарёв]

Добрый день!
На данный момент решаю задачу, в которой мне нужно добавить надписи на фоны блоков в соответствии с этим макетом. У меня в навёрстанной версии страницы для блоков установлены только цвета фонов, но внутри фона(не внутри блока) пытаюсь реализовать те самые надписи из макета.
Но CSS3 какие фишки на этот счёт предлагает?
Заранее спасибо!

Answer 1

[v3shin]

Можно так:

#news:before {
    content: 'NEWS';
    position: absolute;
    top: 0;
    left: 0;
    font-size: 200px;
    opacity: .2;
}
#news header,
#news main {
    position: relative;
    z-index: 1;
}

Ну, и стили настройте под себя.

Comments

[Сергей Золотарёв]

Большое спасибо! Помогло очень хорошо

[Сергей Золотарёв]

v3shin , и возникла вот такая ситуация:

Такие блоки как #news, имеют абсолютное позиционирование, а шапка с контентом внутри них - относительное. Вышло так, когда я распологал правильно надписи, над футером и под контентом вышла белая полоса, которую очень трудно исправить...

Пример одной из трёх страниц, где присуствует данная проблема:

Как это убрать и исправить?

[v3shin]

Сергей Золотарёв, легкого решения придумать не могу: надо всю верстку разбирать. Потому что, как минимум, стили на сайте не совпадают со стилями из ответа.

[Сергей Золотарёв]

v3shin, воспользуясь вашим вариантом, все надписи вместились под шапкой, но потом их правильно сумел распологать, как надо и вышла проблема, которую трудно решать

Answer 2

[fallus]

[data-text]{
	position: relative;
}

[data-text]::before{
	content: attr(data-text);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	pointer-events: none;
  text-transform: uppercase;

	color: red;
	font-weight: 900;
	font-size: 50px;
}

[data-text] > *{
	position: relative;
	z-index: 2;
}

<section id="estate" class="section" data-text="Investment">
...
</section>