Ausgabe
Ich hatte für einen meiner Kunden ein Hintergrundbild im Vollbildmodus erstellt, aber das Problem besteht darin, dass das Bild mithilfe der folgenden CSS-Codes auf den gesamten Bildschirm passt:
#bg-image img{
position:fixed;
left:0;
top:0;
width:100%;
max-height: 100%;
}
#bg-image{
height: 100%;
width: 100%;
float: left;
overflow: hidden;
position: relative;
}
Alles funktioniert perfekt, da das Bild den gesamten Hintergrund meiner Homepage ausfüllt, aber das Problem ist, dass das Hintergrundbild jetzt gestreckt zu sein scheint, und ich würde gerne wissen, wie ich die Größe oder das Verhältnis meines Bildes richtig einstellen kann um die gesamte Bildschirmgröße auszufüllen, ohne gestreckt zu werden (mit voller Qualität), damit das Hintergrundbild eine perfekte Qualität hat.
Also, wie ich mein Bild so gestalten kann, dass es perfekt auf den Hintergrund meiner Homepage passt.
Jede Hilfe wäre sehr willkommen!
Lösung
Sie sollten sich wirklich die Eigenschaft der Hintergrundgröße ansehen , anstatt feste Bilder zu verwenden. Die Verwendung von ‘cover’ für die Hintergrundgröße bedeutet, dass das Bild gerade genug wachsen oder schrumpfen sollte, um den gesamten Hintergrund abzudecken.
Wenn Sie die Abmessungen des Bildes kennen. Sie können eine Medienabfrage verwenden, um die Hintergrundgröße auf “automatisch” zu ändern, wenn sie sonst über ihre ursprüngliche Größe hinauswachsen würde.
html, body {
min-height: 100%;
}
body {
background-image: url(http://leydenlewis.com/images/LANDING_PAGE.jpg);
background-repeat: no-repeat;
background-position: 0 0;
background-size: cover;
}
@media (min-width: 1120px), (min-height: 630px) {
body { background-size: auto; }
}
Beantwortet von – Arnold Daniels
Antwort geprüft von – Terry (FixError Volunteer)
