Fullsize Background Image | CSS mal wieder

  • Guten Abend,


    nach längerer Pause wollte ich mal wieder eine Webseite machen. Im Grunde eine unnötige einfach zum Spaß und wieder zum reinkommen.

    Woran ich aber gerade scheitere und ich weiß nicht welchen Haken ich mir da reingeschmissen habe ist es, ein Füllsize Image zu bekommen.


    Hab leider kein älteres Projekt mehr von mir um nachzusehen wie ich es da gelöst habe.

    Nun ja ich hab schon viel Probiert am Ende ist es jetzt irgendwo oben im niergendwo.

    Man könnte es runterschieben dann schiebt es den ganzen Text mit runter und interagiert mit den anderen <divs>


    Ich weiß das das welcome-background eigentlich in den welcome div Block gehört, ist gerade außerhalb weil ich mich viel gespielt habe. Geht aber auch nicht innerhalb dieses Blocks...hab auch schon probiert das Hintergrundbild direkt auf welcome zu setzen.


    Ich hoffe jemand kann mich da mal gut aufklären.

    Verstehe manchmal CSS echt nicht...


    Edit fiddle - JSFiddle - Code Playground


    Danke.

  • Um ehrlich zu sein finde ich mich nicht so ganz zurecht in deinem Code. Ich finde bei dir keine Einbindung eines Hintergrundbilds.


    Grundsätzlich können Hintergrundbilder aber in CSS wie folgt eingebunden werden:

    CSS
    background-image: url(...) no-repeat;
    background-size: cover;

    Mit background-size: cover; gibst du an, dass der Hintergrund der Größe des Container angepasst wird und behält dabei seine Seitenverhältnisse bei. Vielleicht hilft dir diese Information ja.


    Aus Interesse: Wieso verwendest du so viel Javascript um im Nachhinein noch Klassen zu einzelnen Containern hinzuzufügen?

    Soweit ich das z.B. richtig verstehe, willst du einen Container haben, der die ID background-image hat. Hat dieser die entsprechende ID, gibst du ihm auch die Klasse bg die ja augenscheinlich dann mit CSS gestyled wird. Wieso aber nicht gleich dem entsprechenden Container die Klasse geben?