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;
}

Nevíte si rady?
Neváhejte se zeptat

Nevíte si rady nebo potřebujete něco konzultovat? Nápovědu stále zdokonalujeme na základě vašich požadavků a postřehů. Uvádíme co nejvíce možných variant, které používáme na řešení jednotlivých částí webu, mějte ale na paměti, že projekty řešíme individuálně na základě konkrétních potřeb.

Nádražní 876
560 02 Česká Třebová

honza.cech@czechgroup.cz

+420 774 201 483

*
*