Call Us Now. +00 (111) 999 00

About tctech

Explain to you how all this mistaken denouncing pleasure and praising pain was born and we will give you a complete simply free text account of the system, and expound the actual teachings.
  • Data Analysis
  • Product Development
  • Digital Marketing
  • Security System

Scene System

Backgrounds

Alle Hintergrund-Varianten auf einen Blick. Jede Scene zeigt den verwendeten Code darunter.

<img> SEO data-bg-img Gradient Presets Gradient Freitext Video Einfarbig Opacity

1 — <img> Hintergrundbild (SEO-freundlich)

decorello Werbetechnik München Tapetendruck

Scene mit <img> Hintergrund

Alt-Text + Dateiname wirken auf Bilder-SEO. Ideal für den Hero. 

<section class="scene scene-hero">
    <div class="scene__bg">
        <img
            src="/Assets/gfx/backgrounds/car-designer.webp"
            alt="Beschreibung für Google Bilder-SEO"
            width="1920" height="1080"
            loading="eager"
        >
    </div>
    <div class="scene__overlay" style="--overlay:rgba(0,0,0,0.5);"></div>
    <div class="auto-container">
        <!-- Inhalt -->
    </div>
</section>

2 — data-bg-img (kein SEO, Lazy)

Scene mit data-bg-img

JS setzt background-image aus data-Attribut. Gut für dekorative Bilder ohne SEO-Relevanz. 

<section class="scene scene--md"
         data-bg-img="/Assets/gfx/backgrounds/car-designer.webp"
         data-overlay="0.55">
    <div class="auto-container">
        <!-- Inhalt -->
    </div>
</section>

3 — Gradient Presets (data-bg-gradient)

data-bg-gradient="primary"

Primary

dark → primary (dein Neongelb)

data-bg-gradient="secondary"

Secondary

dark → secondary

data-bg-gradient="warm"

Warm

secondary → primary

data-bg-gradient="dark"

Dark

dark → schwarz

data-bg-gradient="cool"

Cool

blau → dunkelblau

data-bg-gradient="soft"

Soft

lila → hellblau (heller BG)

<!-- Preset-Namen: primary | secondary | warm | dark | cool | soft | sunset | deep | subtle -->
<section class="scene" data-bg-gradient="primary">...</section>
<section class="scene" data-bg-gradient="warm">...</section>
<section class="scene" data-bg-gradient="cool">...</section>

<!-- Neue Presets in scene-engine.js unter gradientPresets{} eintragen -->

4 — Gradient Freitext (volle Kontrolle)

135deg, var(--primary), var(--dark)

Primärfarbe → Dunkel

160deg, secondary → primary → dark

Drei-Farb-Gradient

180deg, dark → primary (von oben nach unten)

Vertikaler Gradient

<!-- Alle CSS-Variablen aus deinen Tokens verwendbar -->
<section class="scene" data-bg-gradient="135deg, var(--primary), var(--dark)">
<section class="scene" data-bg-gradient="160deg, var(--secondary) 0%, var(--primary) 50%, var(--dark) 100%">
<section class="scene" data-bg-gradient="180deg, #1a1a1a, var(--primary)">

5 — Video Hintergrund

Video Hintergrund

autoplay + muted + loop + playsinline = Browser-Autoplay.
poster= als Fallback. aria-hidden für Screenreader. 

<section class="scene scene--md" style="background:#000;">
    <div class="scene__bg">
        <video
            src="/Assets/video/hero-loop.mp4"
            poster="/Assets/img/poster.webp"
            autoplay muted loop playsinline
            preload="none"
            aria-hidden="true"
        ></video>
    </div>
    <div class="scene__overlay" style="--overlay:rgba(0,0,0,0.5);"></div>
    <div class="auto-container">
        <!-- Inhalt -->
    </div>
</section>

6 — Einfarbig (Bootstrap Utility-Klassen)

class="scene bg-dark"

BG-DARK

class="scene bg-light"

BG-LIGHT

class="scene bg-primary"

BG-PRIMARY

class="scene bg-secondary"

BG-SECONDARY

<!-- Bootstrap Utility-Klassen — kein extra CSS nötig -->
<section class="scene bg-dark py-5">
<section class="scene bg-light py-5">
<section class="scene bg-primary py-5">

<!-- Mit Opacity: -->
<section class="scene bg-primary bg-opacity-10 py-5">
<section class="scene bg-dark bg-opacity-80 py-5">

<!-- CSS-Variablen direkt: -->
<section class="scene" style="background: var(--bg-surface);">

7 — Overlay Opacity Varianten

data-overlay="0.2"

Overlay 20%

data-overlay="0.4"

Overlay 40%

data-overlay="0.6"

Overlay 60%

data-overlay="0.8"

Overlay 80%

<!-- Overlay-Stärke per inline CSS Variable -->
<div class="scene__overlay" style="--overlay: rgba(0,0,0,0.4);"></div>

<!-- Oder per data-overlay (scene-engine.js setzt es automatisch) -->
<section class="scene" data-bg-img="..." data-overlay="0.4">

<!-- Mit Farbe: -->
<section class="scene" data-bg-img="..." data-overlay="0.6" data-overlay-color="primary">

scene-backgrounds.php — Scene System v1