• Gelöst Steffen

    (@truncate)


    Hallo zusammen,

    die Position des Header-Bereichs finde ich natürlich sehr gelungen. Ich habe es auch geschafft, den Header in seiner Höhe etwas zurecht zu stutzen.

    @media screen and (min-width: 48em) {
    .twentyseventeen-front-page.has-header-image .custom-header-media,
    .home.blog.has-header-image .custom-header-media {
    	min-height: 40vh;
    	height: auto;
    	}
    }

    Jedoch füllt sich mein gewähltes Hintergrundbild immer ziemlich „ungünstig“ in den dafür vorgesehenen Bereich. Es wird irgendwie seltsam gestreckt und liegt meines Erachtens oben an.
    Kann man die Position und wie mit dem Hintergrundbild umgegangen wird auch halbwegs ohne große Umstände ändern?

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 4 Antworten – 1 bis 4 (von insgesamt 4)
  • Problem gelöst?

    Thread-Starter Steffen

    (@truncate)

    Leider nicht. Das Header-Hintergrundbild wird nur vom linken oberen Eck aus angezeigt und streckt sich dann etwas „komisch“. Mir wäre es lieber, wenn das Hintergrundbild sich am unteren Bildrand zentriert ausrichtet und sich dann von dieser Ausgangssituation strecken würde.

    Das ist kein Hintergrundbild, sondern dort wird ein ganz normales Bild mit dem src-Attribut eingebunden.

    Es ist fixiert, hat eine min-/max-Höhe von 100%, geht also über den gesamten Bildschirm, positioniert ist es top:0;

    Ein bottom: 0; würde nicht funktionieren, da es auf den gesamten Bildschirm referenziert. Du müsstest für den header ein Hintergrundbild einbinden, dann würde das so funktionieren mit der Positionierung, wie du es beabsichtigst.

    Hier zum Basteln:
    https://www.w3schools.com/css/css_background.asp

    Thread-Starter Steffen

    (@truncate)

    Perfekt! Vielen Dank! Die Info hat gereicht. Ich habe das Headerbild einfach angepasst und quasi meinen Wunschausschnitt in der Bilddatei nach oben geschoben.

Ansicht von 4 Antworten – 1 bis 4 (von insgesamt 4)
  • Das Thema „Position vom Header-Bild bei TwentySeventeen“ ist für neue Antworten geschlossen.