diff options
| author | Valentin <valentin@fricklerhandwerk.de> | 2025-11-04 15:52:24 +0100 |
|---|---|---|
| committer | Valentin <valentin@fricklerhandwerk.de> | 2025-11-06 16:46:28 +0100 |
| commit | 90607c6604b1f46dabe1a68b4289f25d3d689453 (patch) | |
| tree | 57e6d8887611af39b9a8090a271a13f2140b735b /www/html | |
| parent | ab1671dba3c30671cab7b0ef5287fd32fdc32a4a (diff) | |
Korrektur der zentrierten Anzeige des Hintergrundbilds
Auf kleinen Bildschirmen war das Hintergrundbild nicht mehr zentriert.
Das liegt sehr wahrscheinlich daran, dass die Zentrierung anhand der intrinsischen Größe des Elements berechnet wird;
die Tabelle ist auf kleinem Viewport aber intrinsisch breiter als das umgebende Element, und das kann man mit CSS auch nicht kompensieren.
Diffstat (limited to 'www/html')
| -rw-r--r-- | www/html/index.html | 20 |
1 files changed, 15 insertions, 5 deletions
diff --git a/www/html/index.html b/www/html/index.html index b0813e6..a3d4043 100644 --- a/www/html/index.html +++ b/www/html/index.html @@ -11,15 +11,25 @@ <style> body { font-family: sans-serif; - background: url("img/Kraniche-oval-4a.png"); - background-position: center center; - background-repeat: no-repeat; - background-blend-mode: multiply; - background-size: auto, auto 125px; background-color: #77cc77; text-align: center; color: #ff0000; } + body::before { + content: ''; + position: fixed; + background-image: url("img/Kraniche-oval-4a.png"); + top: calc(615px/2 + 2em); + left: 50%; + transform: translate(-50%, -50%); + width: 465px; + height: 615px; + background-size: contain; + background-repeat: no-repeat; + mix-blend-mode: multiply; + pointer-events: none; + z-index: -1; + } </style> </head> <body> |