Obrázek s pozadím a obsahem v popředí

Obrázek v pozadí se nastaví pomocí absolutní pozice. Absolutní pozice ignoruje rozvržení dalších komponent a zároveň blok s absolutní pozicí ignorují ostatní elementy na stránce.

Z-index nám umožňuje nastavit, co bude v popředí a co v pozadí. Z-index funguje vždy relativně k parentovi. To znamená, že pokud budeme mít dvě sekce s různým zanořením, z-index nám pravděpodobně nebude správně fungovat. Je důležité aby byly jednotlivé elementy ve stejném parentovi.

   {* Article | Figure *}
    
    <div class="article__figure --flex --flex-column --flex-end-x">
        <a class="article__figure-link" href="{$item|link}" n:if="$img">
            <img class="article__img" src="{$img}" alt="{$item|name|striptags}">
        </a>

        <div class="article__author">

        </div>
    </div>

Article figure je v tomto případě pevně nastavena na 255px, parent absolutního elementu musí mít position:relative, jinak se bude absolutní element pozicovat podle nejbližší ancestor třídy.

Width a height na 100% + object-fit cover se chová stejně jako background-size:cover, umožňuje nám přidat obrázek, který si zachová poměr stran a překryje danou sekci.

Gradient je v tomto případě nastaven jako pseudoelement  &::after.

.article__figure {
	width: 255px;
	height: 255px;
	position: relative;
	flex-shrink: 0;
	z-index: 1;
	padding: 18px 25px;
	
	&::after{
		@include pseudo(block, absolute);
		background: linear-gradient(to top, #000 0%, transparent 60%);
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 0;
		pointer-events: none;
	}
}

.article__author{
	z-index: 2;
}
.article__img{
	position: absolute;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}