Hinzergrundgrafik auf Viewportbreite skalieren

[JürgenB]

Hallo,

ich möchte ein quadratisches Hintergrundbild auf die Breite des Viewports anpassen. Dabei soll das Aspektverhältniss beibehalten werden. Ich habe dieses dadurch realisiert, dass ich das Bild mit Breite 100% in ein Div mit Breite 100% gelegt habe und das Ganze per Z-Index in den Hintergrund schiebe.

Versuch 1

Leider habe ich jetzt das Problem, dass das Bild die Seitenhöhe bestimmt und ich auch Scrollbalken erhalte, wenn es der eigentliche Inhalt nicht erfordert.

Daher habe ich dem das Bild umschließenden DIV noch die Höhe 100% gegeben sowie overflow:hidden:

Versuch 2

Leider wird jetzt, wenn der Inhalt scrollen erfordert, das Bild auf Viewporthöhe abgeschnitten.

Nun meine Frage:

Gibt es im CSS die Möglichkeit, die durch den Inhalt bedingte Höhe der Seite abzufragen? height:100% bezieht sich ja auf die Viewporthöhe.

CSS Version 1

    #bgd {  
      position:absolute;  
      left:0;top:0;  
      z-index:-1000;  
      width:100%;  
    }  
    #bgd img {  
      width:100%;  
      padding:0;margin:0;  
    }

CSS Version 2
    ~~~css #bgd {
      position:absolute;
      left:0;top:0;
      z-index:-1000;
      width:100%;height:100%;
      overflow:hidden;
    }
    #bgd img {
      width:100%;
      padding:0;margin:0;
    }

  
HTML  
  `<div id="bgd"><img src="bg.png" alt="" /></div>`{:.language-html}  
  
  
Gruß, Jürgen

[ChrisB]

Hi,

Leider wird jetzt, wenn der Inhalt scrollen erfordert, das Bild auf Viewporthöhe abgeschnitten.

Dann musst du halt dafür sorgen, dass dieses Pseudo-Hintergrundbild nicht mitscrollt - position:fixed.

Alles andere ergibt bei deiner Anforderung, dass Seitenverhältnis des Bildes beibehalten zu wollen, keinen Sinn.

MfG ChrisB

[JürgenB]

Hallo ChrisB,

Dann musst du halt dafür sorgen, dass dieses Pseudo-Hintergrundbild nicht mitscrollt - position:fixed.

das ist leider keine Option, da das Bild, um das es geht, nicht das Beispielbild, im oberen Bereich recht unruhig und daher als Texthintergrund nicht geeignet ist. Nach unten läuft das Bild gleichmäßig aus, aber eben nicht monochrom. Daher habe ich das Bild so groß gemacht, dass es (fast) immer groß genug ist.

Alles andere ergibt bei deiner Anforderung, dass Seitenverhältnis des Bildes beibehalten zu wollen, keinen Sinn.

warum nicht?

Allerdings interessiert mich eine Antwort auf meine Ausgangsfrage mehr.

Gruß, Jürgen

[ChrisB]

Hi,

Allerdings interessiert mich eine Antwort auf meine Ausgangsfrage mehr.

Folgendes funktioniert nach meinem Test im Firefox wie gewünscht:

• margin/padding von HTML und BODY eliminieren,
• HTML auf 100% Höhe setzen,
• BODY auf Mindesthöhe von 100%, position auf relative.
• Bild-DIV absolute positionieren, wird dann an BODY ausgerichtet. Höhe nicht explizit vorgeben, sondern top und bottom auf 0 setzen; overflow auf hidden.
• Bild im DIV dann noch auf 100% Breite setzen; für Höhe keine Vorgabe machen.

Ggf. muss dann noch der Effekt von adjoining margins ausgeglichen werden, wenn der erste Inhalt im BODY dafür sorgt, dass dieser implizit ein margin-top bekommt.

MfG ChrisB

[JürgenB]

Hallo ChrisB,

Folgendes funktioniert nach meinem Test im Firefox wie gewünscht:

• margin/padding von HTML und BODY eliminieren,
• HTML auf 100% Höhe setzen,
• BODY auf Mindesthöhe von 100%, position auf relative.
• Bild-DIV absolute positionieren, wird dann an BODY ausgerichtet. Höhe nicht explizit vorgeben, sondern top und bottom auf 0 setzen; overflow auf hidden.
• Bild im DIV dann noch auf 100% Breite setzen; für Höhe keine Vorgabe machen.

vielen Dank. Auf "BODY auf Mindesthöhe von 100%, position auf relative." bin ich nicht gekommen.

Version 3

und das CSS

    html {  
      margin:0;padding:0;  
      height:100%;  
    }  
    body {  
      background-color:#fff;  
      position:relative;  
      margin:0;padding:0;  
      min-height:100%;  
    }  
    #bgd {  
      position:absolute;  
      left:0;top:0;bottom:0;  
      z-index:-1000;  
      overflow:hidden;  
    }  
    #bgd img {  
      width:100%;  
      padding:0;margin:0;  
    }  
    #inhalt {  
      margin:0;  
      padding:200px 20px 20px 20px;  
      color:black;  
    }  

Ggf. muss dann noch der Effekt von adjoining margins ausgeglichen werden, wenn der erste Inhalt im BODY dafür sorgt, dass dieser implizit ein margin-top bekommt.

ich habe jetzt alle Margins auf 0 gesetzt und statt dessen Padding genommen. Gibt es da noch eine bessere Lösung.

Gruß, Jürgen

[ChrisB]

Hi,

vielen Dank. Auf "BODY auf Mindesthöhe von 100%, position auf relative." bin ich nicht gekommen.

So kann man dafür sorgen, dass das Bild-DIV sich zwar an der Höhe von BODY und damit dem Inhalt orientiert, overflow:hidden sich aber nicht negativ auf die Inhalte selbst auswirkt, und vermeiden, dass man eine explizite Höhe angeben muss, die dann ggf. wieder zu viel oder zu wenig ist.

Sei dir aber bewusst, dass das in IE <= 6 nicht funktionieren wird - die sind noch nicht in der Lage, die Maße eines Elements aus zwei gegenüberliegenden „Koordinaten“ absoluter Positionierung herzuleiten.

Ggf. muss dann noch der Effekt von adjoining margins ausgeglichen werden, wenn der erste Inhalt im BODY dafür sorgt, dass dieser implizit ein margin-top bekommt.

ich habe jetzt alle Margins auf 0 gesetzt und statt dessen Padding genommen. Gibt es da noch eine bessere Lösung.

Das brauchst du eigentlich nur für das erste Block-Element von BODY machen, dass sich im normalen Fluss befindet.
Was den Effekt sonst noch verhindert, beschreibt http://www.w3.org/TR/CSS21/box.html#collapsing-margins

MfG ChrisB

[JürgenB]

Hallo ChrisB,

noch mal vielen Dank. Den Artikel über die collapsing margins werde ich mir später noch mal in Ruhe durchlesen. Erst mal muss ich jetzt die Ideen von der Testseite auf das echte Werk übertragen.

Ich habe die Testseite (Version 3) noch mal durch den IE-Tester geschickt. Wie angekündigt haben 5.5 und 6 Probleme: die Seite sieht hier wie Version 1 aus, was der Nutzbarkeit aber nicht schadet. Scrollbalken sind nur unschön, wenn es nichts zum Scrollen gibt.

Gruß, Jürgen

[apsel]

Om nah hoo pez nyeetz, JürgenB!

Gibt es im CSS die Möglichkeit, die durch den Inhalt bedingte Höhe der Seite abzufragen?

Nein.

height:100% bezieht sich ja auf die Viewporthöhe.

height:100% bezieht sich auf die Höhe des Elternelements. Wenn ich dich richtig verstanden habe: Du möchtest ein Div-Element auf 100% Höhe des Viewports bringen. Dazu müssen alle Elternelemente auch eine Höhenangabe haben.

In diesem dann das img mit height: 100%; background-attachment: fixed; background-position: center; und overflow: hidden;

Matthias

[Gunnar Bittersmann]

@@JürgenB:

nuqneH

ich möchte ein quadratisches Hintergrundbild auf die Breite des Viewports anpassen. Dabei soll das Aspektverhältniss beibehalten werden. Ich habe dieses dadurch realisiert, dass ich das Bild mit Breite 100% in ein Div mit Breite 100% gelegt habe und das Ganze per Z-Index in den Hintergrund schiebe.

Warum?

Du könntest das zusätzliche 'div', was nichts im Markup zu suchen hat, wieder rausschmeißen. Sämtliche gängigen Browser können mittlerweile Hintergrundbilder skalieren: 'background-size' [CSS3-BACKGROUND §3.9] (Firefox mit Präfix).

Der IE kann es mit proprietärem Filter, passt das Bild damit aber in Höhe und Breite an à la 'background-size: 100% 100%'. Wenn das Seitenverhältnis im IE erhalten bleiben soll, müsste man noch etwas Gehirnschmalz reinstecken. Aber ist das hier so wichtig?

html  
{  
    background-image: url(bg.png);  
    background-repeat: no-repeat;  
    -moz-background-size: 100% auto;  
    background-size: 100% auto;  
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png', sizingMethod='scale');  
    height: 100%;  
    margin: 0;  
    padding: 0;  
}

Qapla'

[JürgenB]

Hallo Gunnar,

auch dir vielen Dank. Dein Lösungsvorschlag funktioniert, da allerdings mein Hintergrundbild "fürchterlich" aussieht, wenn beim Skalieren das Seitenverhältnis nicht eingehalten wird, kann ich diese Lösung so nicht verwenden.

Leider ist es im CSS oft so, dass man sich zwischen verschiedenen Workarounds entscheiden muss. Zusätzliche Hilfselemente im HTML sind genauso unschön, wie der Einsatz proprietärer Eigenschaften oder Methoden, die dann auch noch vom CSS-Validator bemängelt werden. Daher werde ich erst mal den Trick mit dem per Z-Index in den Hintergrund gesetzten Vordergrundbild verwenden.

Gruß, Jürgen