Bootstrap 4 Background Image full cover

[w00tw000t]

Hallo zusammen,

ich erstelle zurzeit für jemanden eine Website und verwende als Framework Bootstrap 4.
Die Seite ist soweit fast fertig und wurde von mir testweise auf den Server hochgeladen. Bei den Tests mit verschiedenen Rechnern und Personen sind einige Fehler aufgetreten und für einen dieser Fehler wende ich mich an euch, da ich hier auf keinen grünen Zweig komme.

Auf der Landing Page schmückt ein großes, bildschirmdeckendes Hintergrundbild die Seite. Auf meinen Rechnern wird das Hintergrundbild bildschirmausfüllend angezeigt (Auflösung/Seitenverhältnis spielt keine Rolle). Getestet habe ich mit Edge, Firefox und Chrome.
Auf dem Rechner meiner Testpersonen wird es hingegen nicht bildschirmfüllend angezeigt. Diese Test wurden mit Windowsrechnern gemacht.
Auf Apple-Geräten wird das Hintergrundbild gezoomt angezeigt... schwer zu beschreiben, daher hier einige Bilder:

So soll die Seite auf allen Geräten aussehen:

So sieht die Seite zurzeit auf einigen Windows Rechnern aus (browserunabhängig):

Und so sieht die Seite auf iPhones und Ipads aus:

Hier ist gut zu erkennen, das nur die obere Ecke des Bildes angezeigt wird. Ich nehme an, dass bei Apple SVG Grafiken anders eingebunden werden müssen?

Hier der entsprechende CSS Code:

html, body {
    height: 100%;
    width: 100%;
}

body{
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-y: scroll;
}
.full-height {
    height: 100%;
}

/*Landing page background image and intensity of the darkening with gradient*/

#landingpage {
    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .1)), url('../files/bg/bg_header.svg')no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; !important;
    height: 100%;
    background-position: center center;
    z-index: -1;
    top: 0;
    min-height: 100vh;
    text-align: center;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    }

Was genau habe ich falsch gemacht? Es hat vermutlich etwas mit "min-height: 100vh;" zutun... aber wie ich das Problem gut löse weiß ich leider nicht. Zudem bekomme ich das "Apple-Problem" nicht in den Griff...
Bin für jeden Tipp oder Hinweis dankbar

Viele Grüße,
w00tw000t

 

[netzgestaltung]

also wenn du height:100%; zu height:100vh; änderst sowie die min-height löscht, was macht es dann?

Ansonsten sagt mir Bootstrap erstmal nichts ohne HTML dazu, aber es könnte, basierend auf deinem HTML, auch deine definierten Stile überschreiben, obwohl die ID-Selektornutzung erstmal stark genug erscheint.

Weiters kannst du dein HTML prüfen ob du den viewport meta tag ausgefüllt hast:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

zb: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">

Ansonsten ist in dem code sowohl top:0; als auch z-index:-1; sinnlos ohne position relative, absolute oder fixed. Default position ist static, da wirken manche deklarationen nicht. Vorbehaltlich, es wurde nicht von anderem CSS schon gesetzt.

background-size: cover; !important; wird ohne semicolon dazwischen geschrieben. allerdings sollte das auch ganz ohne !important; funktionieren je nach interpret wird versucht !important als befehl zu verstehen(invalid).

Wenn du -webkit- prefixe verwendest sollten diese immer über dem standard css befehl stehen, da nach der Reihenfolge interpretiert wird. Rightig bei background-size, falsch bei display hilfe gibts beim autoprefixer: https://autoprefixer.github.io/

Durch die Ordnung nach boxbestimmenden Befehlen und dekorativem sieht man auch leichter was los ist.

Beispiel:

#landingpage {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .1)), url('../files/bg/bg_header.svg')no-repeat center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; !important;
  background-position: center center;
  text-align: center;
}

TL;DR;
Bereinige mal deine aktuellen Fehler und schaue ob sich was bessert.

 

[w00tw000t]

Vielen Dank für deine Antwort!

also wenn du height:100%; zu height:100vh; änderst sowie die min-height löscht, was macht es dann?

Auf meinem Rechner ist kein Unterschied zu erkennen. Auf einem rechner der Testpersonen besteht der Fehler wie in Bild 2 zu sehen auch noch.

Weiters kannst du dein HTML prüfen ob du den viewport meta tag ausgefüllt hast:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Sieht im Moment bei mir so aus:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

Deine restlichen Tipps schaue ich mir morgen in Ruhe an. Vielleicht bekomme ich es damit schon hin.

 

[BeBur]

Ist das nicht etwas viel CSS dafür dass du Bootstrap verwendest? Beim Bild an sich sehe ich das ja ein, aber allgemein verwendet man doch primär das grid Layout und co. Oder nicht?

 

[kim88]

Meiner Erfahrung nach mag Safari keine SVGs als Background Image. Das ist immer ein gebastel. Würde also empfehlen aus dem SVG ein PNG zu machen und dieses bei Safari zu laden.

 

[w00tw000t]

Ist das nicht etwas viel CSS dafür dass du Bootstrap verwendest? Beim Bild an sich sehe ich das ja ein, aber allgemein verwendet man doch primär das grid Layout und co. Oder nicht?

Genau, man arbeitet mit dem Grid-Layout. Besonders für mobile Ansichten und verschiedene Seitenverhältnisse wichtig. Für das Hintergrundbild der Landingpage wüsste ich nicht, wie das per Grid gelöst werden soll Oo

Meiner Erfahrung nach mag Safari keine SVGs als Background Image. Das ist immer ein gebastel. Würde also empfehlen aus dem SVG ein PNG zu machen und dieses bei Safari zu laden.

Habs mir fast gedacht... mist. Wird im Webdesign eher PNG empfohlen? Habe viel positives über SVG gehört. Sollte nicht anstatt PNG JPG verwendet werden? Ist nochmal eine Spur kleiner und ermöglicht kürzere Ladezeiten.

@netzgestaltung Ich habe deine Ratschläge befolgt und auch auf die Reihenfolge geachtet. Wenn ich dein Beispiel übernehme funktioniert es auf meinen Rechnern weiterhin wie es soll. Ich warte mal die Tests der anderen ab. Das !Important habe ich ebenso gelöscht.

 

[kim88]

Nein SVG sind in Ordnung machen bei Safari als Background einfach Probleme.

 

[w00tw000t]

Okay, heißt ich sollte eine Regel einbauen, die nur bei Safari/IOS Safari ein PNG/JPG anzeigt? Dann würde ich bei Windows und Android/Linux das SVG beibehalten.