it-swarm.com.de

Website-Hintergrundbild an Bildschirmgröße anpassen

Ich starte gerade auf einer Website und ich stoße bereits auf ein kleines Problem, für das ich keine spezifische Lösung finden kann.

Ich wollte, dass mein Website-Hintergrund in jede Bildschirmgröße passt, die Höhe spielt dabei keine Rolle.

Dies ist der Link zu meinem Bild:

    ../IMAGES/background.jpg

BEARBEITEN

Ich habe keine Ahnung, was falsch ist, aber aus irgendeinem Grund möchte der Körper nicht einmal das Hintergrundbild erhalten. Es zeigt nur einen einfachen weißen Hintergrund.

body
{background-image:url(../IMAGES/background.jpg);}
17
Tim

das kannst du mit diesem plugin http://dev.andreaseberhard.de/jquery/superbgimage/

oder 

   background-image:url(../IMAGES/background.jpg);

   background-repeat:no-repeat;

   background-size:cover;

ohne die Präfixe von Browsern. es ist alles fertig in beiden browers

55
Victorino

Versuche dies , 

 background: url(../IMAGES/background.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Für weitere Informationen folgen Sie diesem Perfektes Ganzseitenhintergrundbild !!

21
zey

Sie können es mit versuchen

.appBackground {
    position: relative;
    background-image: url(".../img/background.jpg");
    background-repeat:no-repeat;
    background-size:100% 100vh;
}

funktioniert bei mir :)

10
Carlos Jaraiz

Ich fand, dass die oben genannten Lösungen für mich nicht funktionierten (zumindest bei aktuellen Versionen von Firefox und Safari).

In meinem Fall versuche ich es eigentlich mit einem img-Tag, nicht mit einem Hintergrundbild, obwohl es auch für das Hintergrundbild funktionieren sollte, wenn Sie z-height verwenden:

<img  src='$url' style='position:absolute; top,left:0px; width,max-height:100%; border:0;' >

Dies skaliert das Bild als "Vollbild" (wahrscheinlich das Seitenverhältnis), was ich wollte, aber es fiel mir schwer, es zu finden.

Es kann auch für das Hintergrundbild funktionieren, obwohl ich es aufgegeben habe, diese Art von Lösung zu versuchen, nachdem Cover/Contain für mich nicht funktioniert hat. 

Ich fand, dass das Verhalten von Enthalten nicht mit der Dokumentation übereinstimmt, die ich irgendwo finden konnte. Ich verstand, dass die Dokumentation Enthalten die größte Dimension im Bildschirm enthalten sollte (gepflegter Aspekt). Ich fand, dass mein Bild immer winzig gemacht wurde (das Originalbild war groß).

Contain war mit einigen Hacks näher an dem, was ich wollte, als das Cover. Dies scheint zu sein, dass der Aspekt beibehalten wird, das Bild jedoch so skaliert wird, dass die kleinste Dimension zum Bildschirm passt Abmessungen würden offscreen gehen ...

Ich habe ein paar verschiedene Dinge ausprobiert, angefangen mit over, aber die Höhe wurde im Wesentlichen immer ignoriert und würde überlaufen. (Ich habe versucht, ein Nicht-Widescreen-Bild auf beiden Seiten als Vollbild zu skalieren. Der gebrochene Aspekt ist für mich in Ordnung). Grundsätzlich ist das, was für mich funktioniert hat, hoffe es hilft jemandem.

2
pacifist

Versuchen Sie das, ich hoffe es hilft:

position: fixed;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url('background.jpg');
2
Sara Popa

Versuche dies:

background: url(../IMAGES/background.jpg) no-repeat;
background-size: auto auto;
2
Rohit

Hintergrundbildkorrektur für Bildschirme mit Browserkompatibilität css

.full-screen {
    height: 100%;
    width: 100%;
    background-image: url(../images/banner.jpg);
    background-size: cover;
    background-position: center;
    //for browser compatibility
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
}
0
Super Model

Es gibt zwar Antworten auf Ihre Fragen, aber da ich einmal ein Opfer dieses Problems war und nach wenigen Online-Suchvorgängen nicht in der Lage war, das Problem zu lösen, hat mir mein Kollege geholfen, und ich habe das Gefühl, ich sollte es teilen. Beispiele unten erklärt. Ordner: web-projects/project1/imgs-journey.png

hintergrundbild: URL (../imgs/ journey.png); Hintergrundwiederholung: keine Wiederholung; Hintergrundgröße: Cover;

Meine wichtigsten Punkte sind die Punkte dort, wenn Sie bemerkt haben, dass meine journey.png sich in einem Ordner imgs eines anderen Ordners befindet. Sie müssen also den Punkt gemäß den Nummernordnern hinzufügen, in denen Ihr Bild gespeichert ist. In meinem Fall wird mein journey.png-Bild in zwei Ordnern gespeichert, weshalb zwei Punkte verwendet werden. Daher denke ich, dass dies das Problem sein kann, dass Hintergrundbilder manchmal nicht in unseren Codes angezeigt werden. Vielen Dank.

0
Stanleynd

Versuche dies,

.appBg {

background-image: url(".../img/background.jpg");
background-repeat:no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto ;
}

Dieser arbeitet für mich

0
Udara