Christian: Hintergrundbild auf Breite des Browsers verkleinern

Hallo!

Ich glaube, das Thema sagt schon alles. Kann ich mithilfe von CSS ein übergroßes Bild auf die Breite des Browser verkleinern?

Viele Grüße
Christian

  1. klar, mit z.b. einer CSS Klasse, width: xxpx, zusätzlich kannst du natürlich mit JS oder PHP die Fenstergrösse abfragen....

    gruss

    1. wenn man das bild nicht als hintergrundbild einfügt, geht es schon.

      man nehme ein div, gebe diesem z-index:-1, position:absolute und setze es an den beginn des body-quellcodes, gebe breite und höhe mit 100% an ... anschließend füge man ein bild per <img src="" /> ein, gebe diesem display:block, ebenfalls breite und höhe 100% und schon hat man ein hintergrundbild, das sich immer dem browser-fenster anpasst.

      gruß baumeister

      1. Hallo,

        wenn man das bild nicht als hintergrundbild einfügt, geht es schon.

        man nehme ein div, gebe diesem z-index:-1,

        Damit kommt Firefox aber AFAIK noch noch klar (war in CSS2.0 ja auch verboten).
        Man müsste den Inhalt wohl in einen eigenen <div> neben das (absolut-positionierte) Bild packen und ihm z.B. z-index:2 und position:relative geben.

        mfg. Daniel

        1. hi,

          man nehme ein div, gebe diesem z-index:-1,

          Damit kommt Firefox aber AFAIK noch noch klar (war in CSS2.0 ja auch verboten).

          Was, negativer z-index?
          Wo steht das?

          gruß,
          wahsaga

          --
          /voodoo.css:
          #GeorgeWBush { position:absolute; bottom:-6ft; }
          1. Hallo,

            man nehme ein div, gebe diesem z-index:-1,

            Damit kommt Firefox aber AFAIK noch noch klar (war in CSS2.0 ja auch verboten).

            Was, negativer z-index?
            Wo steht das?

            In der SELFHTML-Doku. Und zwar genau http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index@title=hier

            Unter „beachten Sie“:

            „Mozilla Firefox sortiert aufgrund des negativen Wertes Box F (z-index:-1) hinter deren Elternelement (Box C, deren Stapelposition innerhalb des neu erzeugten Kontexts mit 0 angenommen wird) […] Diese Vorgangsweise entspricht CSS2, während die beiden letztgenannten Browser in diesem Zusammenhang bereits die voraussichtliche Spezifikation gemäß CSS2.1 umsetzen.“

            mfg. Daniel

            1. hi,

              In der SELFHTML-Doku. Und zwar genau http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index@title=hier

              Unter „beachten Sie“:

              „Mozilla Firefox sortiert aufgrund des negativen Wertes Box F (z-index:-1) hinter deren Elternelement (Box C, deren Stapelposition innerhalb des neu erzeugten Kontexts mit 0 angenommen wird) […] Diese Vorgangsweise entspricht CSS2, während die beiden letztgenannten Browser in diesem Zusammenhang bereits die voraussichtliche Spezifikation gemäß CSS2.1 umsetzen.“

              Und wo ist da jetzt von einem "Verbot" die Rede, und was soll verboten sein?

              Da steht lediglich, dass die _Interpretation_ sich von CSS 2 zu 2.1 geändert hat.

              gruß,
              wahsaga

              --
              /voodoo.css:
              #GeorgeWBush { position:absolute; bottom:-6ft; }
              1. um die diskussion abzukürzen: natürlich kann man das bild auch mit z-index:1 auszeichnen und den content in ein div mit z-index:2 setzen. ich hatte mit z-index bisher noch keine praxisprobleme erlebt.

              2. Hallo,

                Da steht lediglich, dass die _Interpretation_ sich von CSS 2 zu 2.1 geändert hat.

                OK, dann eben so. Wie wird es dann aber in CSS2.0-konform interpretiert? Anscheinend passiert da gar nichts…

                mfg. Daniel

  2. Moin

    Kann ich mithilfe von CSS ein übergroßes Hintergrundbild auf die Breite des Browser verkleinern?

    Nein.

    Gruß
    rfb

    --
    Man kann einen Menschen nichts lehren, man kann ihm nur helfen, es selbst zu entdecken.
    (Galileo Galilei)
  3. Hallo,

    Ich glaube, das Thema sagt schon alles. Kann ich mithilfe von CSS ein übergroßes Bild auf die Breite des Browser verkleinern?

    Nein, das geht zur Zeit noch nicht. Die derzeit einzige Möglichkeit ist, ein Bild zu nehmen, das in den Hintergrund zu stellen und dessen Größe dann per width/height in deiner CSS-Datei zu regeln.

    Beachte aber, dass die Cairo-Grafikbibliothek noch nicht in allen Browsern integriert ist, wodurch sich die Bildqualität bei einer Skalierung ziemlich verschlechtern könnte.

    mfg. Daniel