Auf Thema antworten

Beitrag

[QUOTE="Sempervivum, post: 14780, member: 3917"]
Hallo Andreas!
Was "fixed" und "relative" betrifft, das kannst Du hier nachlesen:
[URL]https://www.w3schools.com/css/css_positioning.asp[/URL]

Die gängige Anwendung sieht so aus: Mit "relative" legt man fest, dass das Element der Bezugspunkt für ein anderes Element darin ist, das mit "position:absolute" absolut positioniert wird. Bei "position:fixed" wird die Position jedoch relativ zum Viewport bzw. dem Browserfenster fest gelegt, deshalb ist dabei "position:relative" für das Elternelement nicht erforderlich.

Du schreibst, dass mit dem ersten CSS bei dir alles klappt. Bei mir tut es das leider nicht. Erst Mal musste ich die Variablen ersetzen:
[CODE]        .fade-in-preloader {
            animation: fadeIn 10s;
            /* animation: var(--animation_fadein_quote_headline); */
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            position: relative;
            top: 25px;
            left: 25px;
            /* left: var(--transformX_preloader); */
            font-family: Tahoma, sans-serif;
            color: rgba(255, 255, 255, 0.3);
            font-size: 13px;
            width: 100%;
            text-align: center;
            z-index: 200;
        }
[/CODE]
Damit hängt dann jedoch das Bild links oben in der Ecke und ist, wegen "translate(-50%, -50%)" halb verdeckt.

Lasse ich das CSS so, wie ich es in meiner Testdatei von deinen früheren Postings hatte, ist alles OK, Bild und Text sind horizontal und vertikal zentriert, egal wie groß das Bild ist:
[CODE]        .fade-in-preloader {
            animation: fadeIn 10s;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            position: fixed;
            top: 50%;
            left: 50%;
        }
[/CODE]

Bei deinem zweiten CSS, das nicht funktioniert, sehe ich das Problem, dass Du "top" auf 103% gesetzt hast. Damit wird das Bild an den unteren Rand des Browserfensters verschoben.
[/QUOTE]

Authentifizierung