Christian: Hintergrundbild am unteren Bildschirmrand

Hallo,

ich würde gerne ein Hintergrundbild am unteren Bildschirmrand positionieren. Das Bild soll bei jeder Bildschirmauflösung am unteren Bildschirmrand sein.

Wollte das ganze mit bottom machen, klappt aber leider nicht, das Bild wird einfach nicht an unteren Bildschirmrand ausgerichtet.

<div style="background-image:url(../images/kleiner_Zwerg.jpg);
background-repeat:repeat-x; width:100%
position:absolute; left:0px; bottom:100%;">
<br><br><br>
</div>

Wäre nett, wenn ihr mir helfen könntet.

Vielen Dank

  1. Hab ne Lösung gefunden:

    <div style="position:absolute; bottom:0; height:65px; width:100%;
    background-image:url(../images/kleiner_Zwerg.jpg); background-repeat:repeat-x; background-position:center;">
    </div>

    1. Hello out there!

      Hab ne Lösung gefunden:

      Nein, hast du nicht. Das ist keine Lösung, sondern eine Krücke.

      Es ist ein akuter Fall von Divitis; wenn man nicht aufpasst, kann die Krankheit schnell chronisch werden.

      Ein Extra-div nur für ein Hintergrundbild ist nicht erforderlich; weise die background-Eigenschaften dem body zu. Und warum du 'center' schreibst, wenn du „unten“ meinst, ist mir schleierhaft.

      Und verzichte auf Inline-Style-Angaben (style-Attribute); sämtliches CSS gehört gesammelt ins zentrale Stylesheet (style-Element oder externe Datei).

      See ya up the road,
      Gunnar

      --
      “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
      1. Ein Extra-div nur für ein Hintergrundbild ist nicht erforderlich; weise die background-Eigenschaften dem body zu. Und warum du 'center' schreibst, wenn du „unten“ meinst, ist mir schleierhaft.

        Das Problem ist, wenn ich das Hintergrundbild dem body zuordne, funktioniert die Formatierung nicht mehr.

        Habs auf diesem Wege probiert
        body
        {
         font-family:Verdana;
         font-size:12px;
         background-color:#ffffff;
         text-align:center;
        }
        zwerge
        {
        background-image:url(../images/kleiner_Zwerg.jpg;
        background-repeat:repeat-x;
        position:absolute; left:0; right:0; bottom:0; height:65px; width:100%;
        }

        und so
        body
        {
         font-family:Verdana;
         font-size:12px;
         background-color:#ffffff;
         text-align:center;
        background-image:url(../images/kleiner_Zwerg.jpg;
        background-repeat:repeat-x;
        position:absolute; left:0; right:0; bottom:0; height:65px; width:100%;
        }
        klappt aber nicht.

        Bin Anfänger und bin heute erst dem 2ten Tag mit css am Arbeiten. Hab das noch nicht so richtig raus. Vielen Dank für eure Geduld und eure Hilfe.

        Und verzichte auf Inline-Style-Angaben (style-Attribute); sämtliches CSS gehört gesammelt ins zentrale Stylesheet (style-Element oder externe Datei).

        Hab ich gemacht, bis auf das Problem oben.

        1. Hello out there!

          Das Problem ist, wenn ich das Hintergrundbild dem body zuordne, funktioniert die Formatierung nicht mehr.

          Das ist alles andere als eine nachvollziehbare Problembeschreibung. "husseldiguggeldu"

          ich würde gerne ein Hintergrundbild am unteren Bildschirmrand positionieren.

          Welchen Wert muss alo die http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_position@title=background-position-Eigenschaft (für das body-Element!) bekommen? Es dürfen auch zwei sein.

          Das Bild soll bei jeder Bildschirmauflösung am unteren Bildschirmrand sein.

          Wie Martin schon sagte, sind Browserfenster und Bildschirm völlig verschiedene Dinge. Und die Bildschirmauflösung ist für einen Webseitenautor uninteressant.

          See ya up the road,
          Gunnar

          --
          “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
  2. Hallo,

    Hi,

    ich würde gerne ein Hintergrundbild am unteren Bildschirmrand positionieren.

    Okay!

    Wollte das ganze mit bottom machen, klappt aber leider nicht, das Bild wird einfach nicht an unteren Bildschirmrand ausgerichtet.

    Im Prinzip richtig nur ...

    <div style="background-image:url(../images/kleiner_Zwerg.jpg);
    background-repeat:repeat-x; width:100%
    position:absolute; left:0px; bottom:100%;">
    <br><br><br>
    </div>

    ... Dein bottom bezieht sich auf das "absolute"- positionierte "div"
    und nicht auf den Hintergrund.
    Und ausserdem, auch wenn es nicht Dein Problem ist, was soll bottom:100% sein? Unten, eher nicht oder!

    Wäre nett, wenn ihr mir helfen könntet.

    Suche nach background-position!

    Vielen Dank

    Gruß Chris

  3. Moin,

    ich würde gerne ein Hintergrundbild am unteren Bildschirmrand positionieren. Das Bild soll bei jeder Bildschirmauflösung am unteren Bildschirmrand sein.

    das ist nicht möglich. Du kannst kein Hintergrundbild außerhalb des Browserfensters positionieren.

    Wollte das ganze mit bottom machen, klappt aber leider nicht, das Bild wird einfach nicht an unteren Bildschirmrand ausgerichtet.

    Wenn du nochmal aufmerksam nachliest, von wo aus bottom genau misst, und wenn du dann noch die richtige Eigenschaft wählst (nämlich eine, die auch für den Hintergrund zuständig ist), dann kannst du dein Hintergrundbild wenigstens am unteren Rand des Browserfensters ausrichten. Außerhalb von diesem geht nix, wie gesagt.

    Schönen Tag noch,
     Martin

    --
    Wenn zwei dasselbe tun, sind sie vielleicht bald zu dritt.
  4. Hallo Christian.

    ich würde gerne ein Hintergrundbild am unteren Bildschirmrand positionieren.

    Wissen wir bereits, verbleibe zukünftig bitte in deine Originalthread, danke.

    Einen schönen Dienstag noch.

    Gruß, Ashura

    --
    sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
    „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
    [HTML Design Constraints: Logical Markup]