CSS/HTML: Bildschirmhintergrund auch bei vertikaler Nutzung 100% (Höhe)

X_FISH

Grand Admiral Special
Mitglied seit
03.02.2006
Beiträge
4.206
Renomée
1.941
  • BOINC Pentathlon 2017
  • BOINC Pentathlon 2018
  • BOINC Pentathlon 2019
  • SETI@Home Wow!-Event 2019
  • BOINC Pentathlon 2020
  • THOR Challenge 2020
  • BOINC Pentathlon 2021
  • BOINC Pentathlon 2022
  • BOINC Pentathlon 2023
Ich arbeite mich gerade ein wenig in Bootstrap ein. Bisher habe ich immer alles selbst geschrieben, aber wenn es für CSS einen schönen Baukasten gibt - dann könnte man den ja auch nutzen.

Ich habe ein paar Templates ausprobiert, bin nun aber auf ein Problem gestoßen, für welches ich noch keine Lösung habe:

Die Website soll responsive sein, auch auf Smartphones soll jedoch ein Hintergrundbild bei vertikaler Betrachtung »bildschirmfüllend« sein.

Wie man das bei horizontaler Ausrichtung des Anzeigegeräts macht (sprich z.B. Desktop-PC) weiß ich. Aber was bei einem Smartphone, welches der Nutzer mutmaßlich im Hochformat bedient?

Für zielfürende Links zum Thema wäre ich sehr dankbar, Scheinbar verwende ich die falschen (englischen) Suchbegriffe bei Google... :]

Grüße, Martin
 
Genau vor diesem Problem stand ich auch mal :P
Das Problem ist ja, dass die Handhelts im Verhältnis so in die Höhe gehen, dass das bild auf die Breite runter skaliert wird und für dei Höhe bleibt dann nicht mehr genug übrig.
Ergebnis: Die untere Hälfte der Seite ist im Hendhelt einfach weiß und das ganze wirkt abgeschnitten...

Ich habe mich des Tricks bedient, dass ich das Hintergrundbild einfach derbe in die länge gezogen habe...

CSS:
Code:
body {
    background-color: rgb(232, 210, 152);
    background-image: url("../../files/druschke/images/main_bg.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover!important;
    -moz-background-size: cover!important;
    font-family: 'Open Sans', sans-serif !important;
    color: rgb(8,42,66);
    min-height: 100%;
}

Bild: http://www.kfz-druschke.de/files/druschke/images/main_bg.jpg

Seite: http://www.kfz-druschke.de/

Hatte es eben rein pragmatisch gelöst... würde mich aber auch interessieren.

Vielleicht hilft dir das hier weiter:

http://stackoverflow.com/questions/36854417/background-cover-not-working-on-mobile-devices
 
Zurück
Oben Unten