Text-on-image

V000-26

Een preset om tekst weer te geven met een afbeelding op de achtergrond. De tekst kan gebruikt worden met achtergrond en zonder achtergrond.

Hoe te gebruiken?

Kopieer onderstaande HTML en CSS in je template.

Voorvertoning

Alvast beginnen met een basis opmaak?

HTML
Kopiëren<section class="text-on-image position-relative">
	<nc-image name="backdrop-image" width="1280" ratio="1"></nc-image>
	<div class="container">
		<div class="row justify-content-center">
			<div class="col-12 col-lg-6">
				<div class="text-on-image-col">
					<nc-text name="text-content"></nc-text>
				</div>
			</div>
		</div>
	</div>
</section>

CSS
Kopiërenbody:not([data-editor-mode="content"]) .text-on-image div[data-partial="image"] {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: -1;
}

body:not([data-editor-mode="content"]) .text-on-image div[data-partial="image"] div {
	height: 100%;
}

body:not([data-editor-mode="content"]) .text-on-image div[data-partial="image"] img {
	height: 100%;
	object-fit: cover;
	object-position: 50%;
}

.text-on-image .text-on-image-col{
	color: #fff;
	padding: 2rem 1rem;
	background-color: var(--primary);
	/* text-shadow: 2px 2px 10px rgb(0 0 0); */
}