Skalierbare Hintergrund-HTML-CSS-Javascript

Kennt jemand eine Möglichkeit, ein Hintergrundbild zu skalieren, um die Dimensionen des browser-Fensters ist es in? Ich weiß, CSS3 ermöglicht die hintergrund-Breite, aber ich brauche etwas mehr kompatibel.

Vielen Dank,

Elliott

InformationsquelleAutor Elliott Bowles | 2010-02-04
  1. 3

    Können Sie nicht mit einem background-image, als es keine Unterstützung für die Dimensionierung. Sie müssen es imitieren, indem Sie einen img tag, der sich 100% in beide Richtungen, und platzieren Sie es hinter Ihre Inhalte mit absoluter Positionierung und z-index. So etwas wie dies funktionieren sollte:

    <body>
    <img class="bgimage" src="bgimage.jpg" />
    <div id="content">
        Your content here...
    </div>

    Und CSS:

    html, body {
    min-height: 100%;
}

.bgimage {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    Noch nicht getestet, aber das sollte geben Sie Sie einige Vorspeisen, mindestens.

    • Dies funktioniert genial! Ich entledigte sich die height: 100% um zu verhindern, dass stretching das Bild, und planen Sie zum hinzufügen einer Blende an der Unterseite des pic, so dass der Platz unterhalb nicht auch komisch Aussehen. Vielen Dank für die Hilfe!
    InformationsquelleAutor Tatu Ulmanen
  2. 1

    Hier ist der trick (aus http://css-tricks.com/how-to-resizeable-background-image/)

    Definieren Sie Ihr Bild wie dieses:

    <body id="page-body">
    <img class="source-image" src="images/image.jpg" alt="" />
</body>

    und dein CSS wie dieses:

    #img.source-image {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
body {
    overflow: hidden;
}
    InformationsquelleAutor Keltex
  3. 0

    Wenn Sie planen, einen sehr hellen Bildschirm ist es in Ordnung.

    Aber wenn Sie planen, ein Bild als hintergrund für eine überfüllte Seite, hier sind einige Gründe, verlassen wir diese Funktionalität:

    • Einige Browser hatte eine schwierige Zeit zu machen, es schnell: die erste Zeit, während das fließt, und das Fenster resize.

    • Für jedes Bild, das wir hatten, zu verbringen zu viel Zeit zu finden, ein Gleichgewicht zwischen Dateigröße und Bild-definition. Es ist nicht leicht, mit den wachsenden Kundenstamm mit großen Bildschirmen.

    • Wir haben sogar versucht, laden Sie zunächst eine low-res version des Bildes, während der große laden war. Es gab eine sehr schöne Wirkung, aber verbrauchen auch mehr browser-Ressourcen

    Einmal ließen wir die gestreckte Bild, unser app war wieder schnell und wir hielten so das Spiel mit Bild 😉

    • die Website in Frage ist sehr spärlich auf den Inhalt, und es schien zu laden, auf eine akzeptable rate. Ich konnte sehen, wie dies wäre nicht practicle auf eine große Seite, aber. Vielen Dank für den Pointer!
    InformationsquelleAutor Mic
Schreibe einen Kommentar