Was ist die beste Praxis ein Hintergrundbild zu setzen zentriert und 100% (so dass es füllt den Bildschirm, aber immer noch behält das Seitenverhältnis) in allen Browsern?Hintergrundbild zentriert und 100% in allen Browsern
Einen alten Post abholen, da es eine neue Methode gibt, um es mit guter Browserunterstützung zu machen.
Verwenden background-image wie folgt aus:
background-size:cover;
background-position:center;
Dadurch werden die Proportionen des Bildes nicht zerstören, sondern es so gut wie möglich maßstabs nie schwarze Balken zeigt (oder was auch immer im Hintergrund wäre).
Browser-Unterstützung ist fast perfekt, wie man auf Can I use it? sehen können. Opera Mini könnte ein Problem sein, aber der Browser wird wahrscheinlich bald durch Vivaldi ersetzt werden.
Zusammenfassend denke ich, dass dies definitiv der Weg zu gehen ist, da es bei weitem die sauberste und zuverlässigste Lösung ist und sehr einfach mit JS zu bearbeiten.
Vielen Dank für die Aktualisierung eines alten Threads. So mache ich es heute auch. – jamietelin
Ich weiß nicht, wie dies erreicht wird, indem Sie es als Hintergrundbild festlegen. Jedoch Sie ein Bild haben könnte, die absolut
<div style="position:absolute; left:0;right:0;bottom:0;top:0;display:table;vertical-align:middle;text-align:center">
<img style="max-width:100%; max-height:100%" />
</div>
Was ist das 'display: table;' für? – ANeves
für die vertikale Ausrichtung zu arbeiten. es kann auch angezeigt werden: table-cell – Kasturi
Ich glaube nicht, dass Sie es für die vertikale Ausrichtung benötigen, um zu arbeiten, vertikale Ausrichtung soll auf jedem Inline-Element funktionieren: http://www.htmldog.com/reference/ cssproperties/vertical-align/ – ANeves
positioniert ist, könnten Sie verwenden CSS3 background-size property, aber ich bin nicht sicher, wie gut es unterstützt wird. Ich denke, die meisten von ihnen tun, sondern mit dem Präfix:
-o-background-size
-webkit-background-size
-khtml-background-size
Die beste Praxis ist nicht zu tun, was Sie tun mögen.
Wenn Sie 100% angeben, werden Sie das Bild strecken (also verzerren).
Der beste Weg, einen einfachen, zentrierte Hintergrund haben, ist wie folgt:
body {
background-image:url(Images/MyBG.png);
background-position:center top;
background-repeat:no-repeat
}
EDIT:
Jetzt können Sie verschiedene Auflösungen Ziel und eine andere Hintergrundbild verwenden, abhängig von der Größe durch Angabe eines auflösungsabhängigen Stylesheets. Sie können separate Stylesheets verwenden, um nur das eine Hintergrundelement mit verschiedenen Dateien zu definieren.
<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />
See: http://css-tricks.com/resolution-specific-stylesheets/
oder die W3C CSS media query spec.
Problem mit dieser Lösung ist, dass ich viele, viele Bilder mit unterschiedlicher Auflösung machen muss. – jamietelin
Dies ist ein ausgezeichneter Beitrag auf zwei Methoden, um dieses Aussehen zu erreichen:
Ich habe eine modifizierte Version von Technik # 2, funktioniert Art von okey, überprüfen Sie meine eigene Antwort auf die Frage. – jamietelin
beste Lösung, die ich haben es geschafft, so weit zu machen, ist wie folgt;
//CSS
<style type="text/css">
body {
margin:0; padding:0;
}
html, body, #bg {
height:100%;
width:100%;
}
#bg {
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
overflow:hidden;
z-index:0;
}
#bg img {
width:100%;
min-width:100%;
min-height:100%;
}
#content {
z-index:1;
}
</style>
//HTML
<body>
<div id="bg">
<img style="display:block;" src="bgimage.jpg">
</div>
<div id="content">
//Rest of content
</div>
</body>
Könnte dies der beste Weg sein? Hat jemand Probleme dabei?
Danke für Ihre Zeit!
Was ist "alle Browser"? Beinhaltet es IE6? (Zu deinem Besten, besser nicht.) – ANeves
Nein, aber alle Browser aktuell :) Also, IE8, Firefox 3, Safari 4 und so weiter ... und mit allen meine ich alle gängigen Browser nicht Camino, Miro und bald. – jamietelin