Как правильно добавить фон через css?

Question

[Ord EO]

Мне нужно сделать изображение с наложенным на него цветом.
Я делаю это таким способом.

HTML

<div class="main">
<div class="backg"></div>
</div>

CSS

.main {
	background:  url(../images/main.jpg)  no-repeat center 20%;
	background-size: 100%;
	height: 100vh;
}

.backg {
	background-color: rgba(231, 30, 37, 0.4);
	height: 100vw;
}

Все работает, но метод мне кажется неправильным, ибо единственная функция тега backg - это добавление фона, что явно не семантично. Плюс фон продолжает идти после изображения, а мне нужно покрыть фоном только изображение. Как можно это сделать правильно?

Накидал это же на Codepen

Answer 1

[Pavel Kuzyakin]

Плюс фон продолжает идти после изображения, а мне нужно покрыть фоном только изображение. Как можно это сделать правильно?

у вас у класса backg высота указана в vw, а не в vh, отсюда этот дефект.

Comments

[Ord EO]

да, не заметил, большое спасибо.

[Ord EO]

Но все же, создавать отдельный тег для фона мне кажется не семантично. Так как у этого тега в принципе нет каких-либо функций

[Pavel Kuzyakin]

Ord EO, у него есть функция покрасить изображение :-) кстати, а почему уже готовую картинку не запихнуть бэкграундом?

если вас сильно гложет такая мелочь, как семантика, можете начать копать в сторону CSS Filters и свойства object-fit.

[Ord EO]

Pavel Kuzyakin, большое спасибо за совет

[Pavel Kuzyakin]

Ord EO, и я совсем забыл про background-blend-mode (

[Dima Polos]

Pavel Kuzyakin, Это все не кроссбраузерно.

Answer 2

[Dima Polos]

Просто сделайте псевдо элемент для main и позиционируйте его абсолютно.