• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Was gibt es Schöneres als den Mai draußen in der Natur mit allen Sinnen zu genießen? Lasst uns teilhaben an Euren Erlebnissen und macht mit beim Thema des Monats Da blüht uns was! ---> Klick

Hintergrundbild height 100%

robbieW

Doppelter Prinzenapfel
Registriert
09.03.09
Beiträge
442
Hallo Kollegen,

ich möchte bei einer Website ein Hintergrundbild einfügen welches im Browser rechts platziert ist nur nur die Höhe 100% einnehmen soll.

Ich bekomme das per css nicht hin.

Siehe Code:

body{
font-size: 14px;
line-height: 140%;
background: #000000 url(../img/bild-beispiel.png) no-repeat right bottom fixed;
color:#dddddd;
}

was muss ich einfügen damit mien Bild sich proportional im Browser immer auf 100% Höhe skaliert?

Danke
 

DubiDuh

Zwiebelapfel
Registriert
20.05.08
Beiträge
1.288
Versuch es mal mit background-size: cover;
 

robbieW

Doppelter Prinzenapfel
Registriert
09.03.09
Beiträge
442
Dann wird es komplett in 100% dargestellt. Ich brauche aber nur height 100%
 

Alexander@MTC

Erdapfel
Registriert
29.09.14
Beiträge
3
Okay, der Beitrag ist zwar nicht mehr ganz aktuell, aber falls es noch interessiert. So geht's:

background-size: 1000px 100vh

1000px Breite ist nur ein Beispielwert. Interessent ist 100vh.
vh steht für Viewport Height. Es gibt auch vw, also Viewport Width.

100vh heißt also, dass das Element, in diesem Fall das Hintergrundbild, die ganze Breite des Bildschirms ausfüllen soll.

Sehr praktisch also, aber nur wenig bekannt.
 
  • Like
Reaktionen: z3ro und MacMac512

Mitglied 189256

Gast
Ich finde vh und vw etwas Problematisch, da es Ur Zeit nur von wenigen Browsern RICHTIG umgesetzt wird.