Wie man ein Hintergrundbild auf Stretch eine Web-Seite anpassen

Zurück ◈ Weiter

Wenn Sie mit Hintergrundbildern zu arbeiten beginnen, werden Sie zweifellos in das Szenario ausführen, auf dem Sie ein Bild zu „strecken“ wollen die Seite passen.

Der beste Weg, um ein Bild zu strecken, um den Hintergrund einer Seite zu passen ist die CSS3-Eigenschaft verwendet wird, für „background-size“. Hier ist ein Beispiel, das ein Hintergrundbild für den „Körper“ von einer Seite verwendet und weichen setzt die Größe auf „100%“, so dass es immer strecken, um den Bildschirm zu passen.

Körper background: url (bgimage.jpg) no-repeat;
Hintergrund-size: 100%;
>

Nach caniuse.com. Diese Eigenschaft funktioniert in IE 9 # 43 ;, Firefox 4 # 43 ;, Opera 10.5 # 43 ;, Safari 5 # 43 ;, Chrome 10.5 # 43 ;, und auf allen wichtigen mobilen Browsern. Dies deckt Sie für alle modernen Browser verfügbar heute, was bedeutet, dass Sie diese Eigenschaft ohne Angst nutzen sollte, dass es nicht auf jemandes Bildschirm arbeiten.

Faking einen gestreckten Hintergrund in älteren Browsern

Es ist sehr unwahrscheinlich, dass Sie alle Browser unterstützen müssen älter als IE9, aber nehmen wir an, dass Sie befürchten, dass IE8 diese Eigenschaft nicht unterstützt. In diesem Fall können Sie fälschen gestreckten Hintergrund. Und Sie können die Browser-Präfixe für Firefox 3.6 (-moz-background-size) und Opera 10.0 (-o-Hintergrund-Format) verwenden.

Der einfachste Weg zu fälschen eine gestreckten Hintergrundbild ist es über die gesamte Seite zu strecken. Dann haben Sie am Ende nicht mit besonders viel Platz nach oben oder befürchten, dass Ihr Text in der gestreckten Bereich passt. Hier ist, wie es zu tun:

Alle Ihre Inhalte hier - einschließlich Header, Absätze, usw.

Erfahren Sie jeden Tag etwas Neues

Faking ein gestreckten Hintergrundbild über einen kleineren Raum

Sie können über einen DIV oder ein anderes Element auf Ihrer Webseite eine ähnliche Technik zu fälschen eine gestreckten Hintergrundbild verwenden. Dies ist ein bisschen schwieriger, wie Sie entweder absolute Positionierung verwenden oder haben seltsame Abstand Ausgaben für andere Teile Ihrer Seite.

  1. Legen Sie das Bild auf der Seite, die ich will als Hintergrund verwenden.
  2. Im Stylesheet, stellte eine Breite und Höhe für das Bild. Beachten Sie, dass Sie Prozentsätze für die Breite oder Höhe verwenden, aber ich finde es einfacher, mit Längenwerte für die Höhe einzustellen. img # bg Breite: 20em;
    Höhe: 30em;
    >
  3. Platzieren Sie Ihre Inhalte in einem div mit der id „Inhalt“, wie wir oben haben:

Alle Ihre Inhalte hier

  • Stil der Inhalt div die gleiche Breite und Höhe wie das Hintergrundbild sein: div # content Breite: 20em;
    Höhe: 30em;
    >
  • Dann positioniert, den Inhalt auf die gleiche Höhe auf, als das Bild. Also, wenn Ihr Bild ist 30em Sie einen Stil der Spitze haben würde: -30em; Vergessen Sie nicht, einen Z-Index von 1 auf den Inhalt zu setzen. #content Position: relative;
    top: -30em;
    z-Index: 1;
    Breite: 20em;
    Höhe: 30em;
    >
  • Dann fügen Sie in einem Z-Index von -1 für IE 6 Nutzer, wie Sie oben haben:

    • Wieder mit „background-size“ die breite Browser-Unterstützung genießen es jetzt der Fall ist, ist dieser Ansatz auch sehr wahrscheinlich unnötig und als Produkt einer vergangenen Epoche präsentiert. Wenn Sie diesen Ansatz verwenden wollten, nur sicher sein, diese viele Browser in so zu testen, wie Sie können. Und wenn Ihr Inhalt ändert die Größe, müssen Sie die Größe des Containers und Hintergrundbild ändern, andernfalls werden Sie mit seltsamen Ergebnissen enden.

    Komplette Meldung lesen

    In Verbindung stehende Artikel

    Zurück ◈ Weiter