woako: Background-image soll sich anpassen

Hallo,

Ich habe die CSS-Angabe
body { background-image:url(bg1.gif); background-repeat:no-repeat; }

Das Bild füllt den gesamten Bildschirm aus.

Wie kann ich erreichen, dass das Bild sich verkleinert, wenn das Fenster verkleinert wird?

Bei einem 'normalen' Bild erreicht man dies ja durch die size-Angaben in em.

Gruß
woako

  1. Hallo woako,

    Ich habe die CSS-Angabe
    body { background-image:url(bg1.gif); background-repeat:no-repeat; }

    Das Bild füllt den gesamten Bildschirm aus.

    Wie kann ich erreichen, dass das Bild sich verkleinert, wenn das Fenster verkleinert wird?

    Nur mit einem Bild im Virdergrund (IMG)

    Bei einem 'normalen' Bild erreicht man dies ja durch die size-Angaben in em.

    Nein, das erreicht man über CSS durch eine prozentuale Width-Angabe im Bezug auf das Elternelement, indem man sich gleichzeitig zu Height ausschweigt. Wenn das Bild im Hintergrund liegen soll, kannst du Elemente, die darüber liegen sollen, z.B. absolut positionieren.

    Gruß Gernot

    1. Hallo,

      Bei einem 'normalen' Bild erreicht man dies ja durch die size-Angaben in em.

      Nein, das erreicht man über CSS durch eine prozentuale Width-Angabe im Bezug auf das Elternelement, indem man sich gleichzeitig zu Height ausschweigt. Wenn das Bild im Hintergrund liegen soll, kannst du Elemente, die darüber liegen sollen, z.B. absolut positionieren.

      Obiges habe ich aber unter < http://de.selfhtml.org/css/layouts/mehrspaltige.htm#>
      gelesen

      Gruß
      woako

      1. Hallo woako,

        Bei einem 'normalen' Bild erreicht man dies ja durch die size-Angaben in em.

        Obiges habe ich aber unter http://de.selfhtml.org/css/layouts/mehrspaltige.htm#
        gelesen

        Das glaube ich kaum: Wenn du die Größe eines Bildes in Bezug auf die Schriftgröße definierst, dann hat das mit der Größe des Browserfensters per se nichts zu tun, kann es ja dann auch nicht, entweder - oder!

        Gruß Gernot

  2. hi,

    Wie kann ich erreichen, dass das Bild sich verkleinert, wenn das Fenster verkleinert wird?

    Du liest doch schon seit ein paar Tagen hier mit - da kann dir doch dieser Thread eigentlich nicht entgangen sein?

    gruß,
    wahsaga

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

      Du liest doch schon seit ein paar Tagen hier mit - da kann dir doch dieser Thread eigentlich nicht entgangen sein?

      Noch schaue ich nicht so intensiv hier herein.
      Dass ein ähnliches Thema erst vor kurzem behandelt wurde, ist mir daher leider entgangen.
      Ich habe zwar gesucht, allerdings nicht mit den passenden Suchwörtern.
      Danke für den Hinweis.

      Gruß
      woako

      NB. Hast Du meinen Thread "Unterschiedliche Schriftgrößen" nochmals angeschaut. Es ist doch so, dass die Browser (mindestens einer)
      die Schriftgrößen und andere Attribute in eine CSS auslagert.

  3. Hallo,

    Ich habe die CSS-Angabe
    body { background-image:url(bg1.gif); background-repeat:no-repeat; }
    Das Bild füllt den gesamten Bildschirm aus.

    Das trifft zufällig für _deine_ Bildschirmgröße zu. Ein Hintergrundbild hat eine unveränderte Größe in Pixeln. Bei einem größeren Bildschirm reicht's dann nimmer.

    Wie kann ich erreichen, dass das Bild sich verkleinert, wenn das Fenster verkleinert wird?

    Du packst dieses Bild mit <img ... width='100%' height='100%'> als einziges Element in einen div {position:absolute;width:100%;height:100%}
    Wenn beim Bild width oder height fehlt, wird es _proportional_ verändert, es können rechts oder untern unbebilderte Streifen entstehen.

    Bei einem 'normalen' Bild erreicht man dies ja durch die size-Angaben in em.

    Auch wieder nur zufällig bei _deiner_ Bildschirmgröße und _deiner_ im Browser eingestellten Schriftgröße. 1em entspricht der im Browser eingestellte Schriftgrösse, die Fenstergröße ist davon vollkommen unabhängig.

    Gruß, Kalle

    Hier einige 100% - Hintergrundgrafiken, die sich auch verzerren, damit das Fenster bei unterschiedlichem Breiten- Höhenverhältnis ausgefüllt ist:
    http://shanthi-guesthouse.de/loop_1_index.htm