DIV Hintergrundbild am unteren rand ausrichten

  • Hey, schau mal hier

    Der Trick in dem Fall ist das css Argument "position". Der einzige Fehler, des "Lösungsersteller" er hat ein </div> beim #bottom_div vergessen.

    Edit://
    Okay mit dem Beispiel zickt wer wohl rum? Genau der Mist von MS.

    Deswegen hier mal ein kleines Beispiel:

    Quellcode

    1. <style type="text/css">
    2. #container {
    3. position:relative;
    4. border:solid 1px #000;
    5. width:200px;
    6. min-height:200px;
    7. height:auto !important;
    8. height:200px;
    9. color:#000;
    10. }
    11. #bottom_div{
    12. height:100px;
    13. width:100%;
    14. background-image: url(xyz.jpg);
    15. position:absolute;
    16. left:0px;
    17. bottom:0px;
    18. }
    19. </style>
    20. <div id="container">Test
    21. <div id="bottom_div"></div>
    22. </div>
    Alles anzeigen


    Allerdings, das ist jetzt die Frage. Soll der Bottom Div "beschreibbar" sein oder soll der unter dem Text wandern? So wie meine Lösung jetzt ist geht der Text, wenn er lang genug ist in das Hintergrundbild mit hinein.

    Andere Möglichkeit wäre, jenachdem wie das Design das ganze erlaubt (keine Abgerundetete Ecken oder ähnliches) einfach ein Div unter das Div zu setzen. Sprich

    Quellcode

    1. <div id="container">Test blabla</div>
    2. </div id="bottom">Ich stehe direkt unter dem Text</div>

    Dieser Beitrag wurde bereits 4 mal editiert, zuletzt von Snowflake ()