Hintergrund am unteren Rand platzieren

  1. no_n@me

    no_n@me Thread StarterMacUser Mitglied

    Mitglied seit:
    20.03.2006
    Beiträge:
    734
    Zustimmungen:
    1
    Hallo,

    ich versuche gerade, ein Hintergrundbild am unteren Rand einer Website zu platzieren. Das Hintegrundbild soll sich horizontal wiederholen.
    Klappt auch mit Safari und wohl auch mit neueren Versionen des IEs. Nur leider mit Firefox, Opera und Camino nicht. Da ist das Hintergrundbild nicht am unteren Rand der gesamten Seite, sondern am unteren Rand es Contents. Bei wenig Text, Bildern, was auch immer ist unten ein dicker weißer Rand zu sehen.

    Hier mal Teile der CSS, der Rest hat eigentlich nichts damit zu tun:
    HTML:
    body {
      background-color: #ffffff;
      background-image: url(bg.jpg);
      background-repeat: repeat-x;
      background-position: bottom;
      font-size: 12px;
      font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
      color:#000000;  
      padding:0px;
      margin:0px;
    }
    
    #inhalt { 	
      margin: 1em auto;
      padding: 10px;
      width: 700px;
      background-color: #FAE4DE;
      border: 1px dotted #000000;
      text-align: justify;
    }
    HTML:
    HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Test</title>
    <style type="text/css" media="screen">
      @import url("css/style.css");
    </style>
    </head>
    <body>
    <div id="inhalt">
    <h1>Test-Seite</h1>
    <p>Inhalt…</p>
    <p>blablabla…</p>
    </div>
    </body>
    </html>
     
    no_n@me, 30.08.2006
  2. no_n@me

    no_n@me Thread StarterMacUser Mitglied

    Mitglied seit:
    20.03.2006
    Beiträge:
    734
    Zustimmungen:
    1
    Zur Veranschaulichung mal Bilder…

    Wie es aussehen soll (was mit Safari auch klappt):
    [​IMG]

    Wie es im Firefox aussieht:
    [​IMG]
     
    no_n@me, 30.08.2006
  3. miss.moxy

    miss.moxyMacUser Mitglied

    Mitglied seit:
    15.05.2004
    Beiträge:
    6.539
    Zustimmungen:
    624
    Hab mal ein wenig rumgegoogled.
    Füge mal beim body-css noch folgendes hinzu:
    HTML:
    background-attachment: fixed;
    Safari & FF gehen, ich weiß allerdings jetzt nicht, wie die Windows-Welt
    drauf reagiert.
     
    miss.moxy, 30.08.2006
  4. ThaHammer

    ThaHammerMacUser Mitglied

    Mitglied seit:
    01.06.2004
    Beiträge:
    3.277
    Zustimmungen:
    13
    Du hast auch die Möglichkeit mit Top und Left den Hintergrund zu schieben!
     
    ThaHammer, 30.08.2006
  5. no_n@me

    no_n@me Thread StarterMacUser Mitglied

    Mitglied seit:
    20.03.2006
    Beiträge:
    734
    Zustimmungen:
    1
    Klasse, funktioniert! Die Windows-Welt werd ich mal befragen. Danke!

    Ja, nur wie schaffe ich es dann, daß er bei jeder Auflösung ganz unten ist?
     
    no_n@me, 30.08.2006
  6. ThaHammer

    ThaHammerMacUser Mitglied

    Mitglied seit:
    01.06.2004
    Beiträge:
    3.277
    Zustimmungen:
    13
    Das könnte man per Javaskript lösen. Per JS kannst Du die Auflösung abfragen und den errechneten Wert dann übergeben.
     
    ThaHammer, 30.08.2006
  7. xenxox

    xenxoxMacUser Mitglied

    Mitglied seit:
    28.01.2005
    Beiträge:
    153
    Zustimmungen:
    1
    Selbstverständlich funktioniert das nicht, da die Höhe des Bodys nicht das sichtbare Fenster ist sondern nur der Teil in dem andere Boxen positioniert sind. Du könntest mit verschiedenen CSS Hacks die Höhe auf 100% setzen, aber auch das bringt Probleme mit sich. Das Javascript Lösung ist absolut unsinnig, denn nur weil eine max. Höhe von beispielsweise 1280px vorliegt muss dies nicht bedeuten dass der Browser auch diese voll nutzt.

    Das einzige was halbwegs funktioniert ist die Lösung über fixed, aber diese ist halt nicht sonderlich flexibel.
     
    xenxox, 30.08.2006
  8. no_n@me

    no_n@me Thread StarterMacUser Mitglied

    Mitglied seit:
    20.03.2006
    Beiträge:
    734
    Zustimmungen:
    1
    Ähm… Nee, danke. ;)

    @ derFaktor:
    Warum ist das mit dem fixed nicht sonderlich flexibel?
     
    no_n@me, 30.08.2006
  9. ThaHammer

    ThaHammerMacUser Mitglied

    Mitglied seit:
    01.06.2004
    Beiträge:
    3.277
    Zustimmungen:
    13
    Und selbstverständlich könnte das doch funktionieren! Na ja vielleicht nicht auf den Pixel genau, da könnte es durchaus Probleme geben, aber mit Window.innerHeight z.B könnte man da schon hinkommen. ;) :p
    Hm, sehe gerade das wahrscheinlich doch eher screen.availWidth! Na selber programmiert habe ich das noch nie, denke aber das es schon irgendwie funktionieren könnte! :)
     
    ThaHammer, 30.08.2006
Die Seite wird geladen...