Hintergrund am unteren Rand platzieren

Dieses Thema im Forum "Web Page Design" wurde erstellt von no_n@me, 30.08.2006.

  1. no_n@me

    no_n@me Thread Starter MacUser Mitglied

    Beiträge:
    734
    Zustimmungen:
    1
    MacUser seit:
    20.03.2006
    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>
     
  2. no_n@me

    no_n@me Thread Starter MacUser Mitglied

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

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

    Wie es im Firefox aussieht:
    [​IMG]
     
  3. miss.moxy

    miss.moxy MacUser Mitglied

    Beiträge:
    6.558
    Zustimmungen:
    624
    MacUser seit:
    15.05.2004
    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.
     
  4. ThaHammer

    ThaHammer MacUser Mitglied

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

    no_n@me Thread Starter MacUser Mitglied

    Beiträge:
    734
    Zustimmungen:
    1
    MacUser seit:
    20.03.2006
    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?
     
  6. ThaHammer

    ThaHammer MacUser Mitglied

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

    xenxox MacUser Mitglied

    Beiträge:
    152
    Zustimmungen:
    1
    MacUser seit:
    28.01.2005
    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.
     
  8. no_n@me

    no_n@me Thread Starter MacUser Mitglied

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

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

    ThaHammer MacUser Mitglied

    Beiträge:
    3.276
    Zustimmungen:
    13
    MacUser seit:
    01.06.2004
    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! :)
     
Die Seite wird geladen...

Diese Seite empfehlen