Weitere Informationen und den Download findest du auf der offiziellen Anlaufstelle de.wordpress.org
Seite 1 von 4 123 ... LetzteLetzte
Ergebnis 1 bis 10 von 38
Like Tree3Likes

Thema: Flexible Header-Grafik?

  1. #1
    PostRank: 0
    Registriert seit
    01.04.2017
    Beiträge
    17

    Flexible Header-Grafik?

    Ich habe immer noch ein Problem mit meiner Header-Grafik und hoffe, dass mir auch diesmal hier geholfen werden kann
    Hab über den Customizer ein Bild eingebunden und hatte eigentlich erwartet, dass es sich der jeweiligen Bildschirmbreite anpasst.
    Leider wird es bei Monitoren mit anderen Maßen/Auflösung abgeschnitten oder es entstehen weiße Flächen links und rechts.
    Ich will aber, dass das Bild immer bildschirmfüllend angezeigt wird.
    Hab leider kaum Ahnung von php, dachte dass "flex-width' => true" die Lösung wäre, aber nein

    So sieht die header.php aus:

    function education_hub_custom_header_setup() {
    add_theme_support( 'custom-header', apply_filters( 'education_hub_custom_header_args', array(
    'default-image' => 'http://neu.lessing-gymnasium.eu/wp-content/uploads/2017/08/HP-Neuer-Header3d.jpg',
    'default-text-color' => '666666',
    'header-text' => false,
    'width' => 1420,
    'height' => 550,
    'flex-height' => true,
    'flex-width' => true,
    ) ) );

    Was mache ich falsch?

    Danke und LG
    philine

    PS: geht um neu.lessing-gymnasium.eu
    Geändert von philine (24.08.2017 um 11:50 Uhr)


  2. #2
    WPDE-Moderator Avatar von maxe
    Registriert seit
    01.05.2008
    Beiträge
    17.937
    wie sieht denn der img Tag im Header aus?
    Bitte immer zuerst die Suchmaschine Deines Vertrauens nutzen, dann die FAQ und die Forensuche, und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.

    Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)

  3. #3
    PostRank: 0
    Registriert seit
    01.04.2017
    Beiträge
    17
    Ääähm..was genau meinst du?
    In der custom-header.php gibt es nur 'default-image', siehe oben.
    Dann gibt es eine header.php, da ist aber kein img Tag drin.
    In der style.css gibt es zwei img Tags ,
    einmal unter #elements:
    img {
    height: auto; /* Make sure images are scaled correctly. */
    max-width: 100%; /* Adhere to container width. */
    }
    und dann unter
    .wp-caption img[class*="wp-image-"] {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    }
    Meinst du irgendwas davon?

  4. #4
    PostRank: 4
    Registriert seit
    07.07.2015
    Beiträge
    174
    Dein Theme setzt das Image als Background-image.

    url("http://neu.lessing-gymnasium.eu/wp-content/uploads/2017/08/HP-Neuer-Header3d.jpg");

    Also probiere mal:

    #masthead {

    }

    zu ändern, indem du

    background-size: 100% auto

    einfügst.

  5. #5
    PostRank: 4 Avatar von Kurt Singer
    Registriert seit
    28.05.2017
    Ort
    Koblenz
    Beiträge
    184
    Wenn Dein Banner für alle (oder zumindest die meisten) Bildschirmgrößen monitordeckend sein soll, würde ich die Bannerbreite auf 1920 px vergrößern. Ich habe jetzt keine Farbanpassung für den Hintergrund gemacht. Ich würde auch die Höhe etwas verringern und insgesamt internetmäßig komprimieren. Deine Headergrafik hat 633 KB, meine etwas über 60 KB.

    LessingGym.jpg
    Geändert von Kurt Singer (25.08.2017 um 13:59 Uhr)
    Meine Webergüsse: www.kurt-singer.de

  6. #6
    PostRank: 3
    Registriert seit
    13.06.2017
    Ort
    Im hohen Norden
    Beiträge
    149
    Versuche es doch mal mit...

    #masterhead {
    ...
    ...
    background-size: cover;
    }

  7. #7
    PostRank: 0
    Registriert seit
    01.04.2017
    Beiträge
    17
    Danke für die Tipps, aber leider klappt es nicht
    Habe die Bannerbreite auf 1920px vergrößert, dann wird bei mir das Bild links und rechts abgeschnitten.
    Hab sowohl "
    background-size: cover" als auch "background-size: 100% auto" ausprobiert, aber es tut sich nichts.
    Hat noch irgendwer eine schlaue Idee?


  8. #8
    PostRank: 3
    Registriert seit
    13.06.2017
    Ort
    Im hohen Norden
    Beiträge
    149
    Sorry, aber dann ist irgendetwas anders bei dir nicht richtig!
    Mit 'background-size: cover;' sieht das bei mir so aus:
    lessing-gym.jpg

    Oder wie soll es aussehen?

    PS: das ist die Ansicht mit FireFox Webentwickler Tool 'Inspektor'. Im unteren Bereich links (blau hinterlegt) das gewählte Element - im unteren Bereich rechts das dazugehörige CSS.
    Kann man da auch direkt zum testen ändern und schauen, wie es sich auswirkt.
    Geändert von Sailor56 (26.08.2017 um 10:47 Uhr)

  9. #9
    PostRank: 0
    Registriert seit
    01.04.2017
    Beiträge
    17
    Ja, genau so soll es aussehen..
    Aber bei mir und an einem anderen Monitor mit kleinerer Bildschirmbreite als 1920 sieht es so aus:Screemshot_LG.jpg
    (hab 'background-size: cover;' eingefügt)

    Irgendwo versteckt sich wohl ein Fehler, aber ich finde ihn einfach nicht

  10. #10
    PostRank: 3
    Registriert seit
    13.06.2017
    Ort
    Im hohen Norden
    Beiträge
    149
    Ahhhh.... jetzt kommen wir der Sache näher. Ich sehe, was das Problem ist.
    Das Bild hat vorgegebene Proportionen in Höhe und Breite - ebenso hat dein Header Proportionen, die allerdings variabel sind. Zumindest die Breite richtet sich immer nach der Bildschirmauflösung.
    Solange die Proportionen von Bild und Bildschirm passen, sieht es gut aus, aber in dem Moment, wo (wie in deinem Fall) der Platz in der Breite nicht ausreicht, fängt die Webseite/ der Browser an es zu korrigieren... na ja, er versucht sein Bestes.
    Folgende Idee: Mit dem jetzigen Layout als Hintergrundbild im Header werden wir das Problem so leicht nicht lösen können - aber, wäre es möglich das Bild als <img..> in den Header einzufügen.
    Dem Bild kann man einen 'width: 100%;' geben und dem Header müsste man alles Größenangaben (auch 'padding') wegnehmen. Seine Größe richtet sich dann nach dem Inhalt (dem Bild).
    Hätte den Nachteil, dass die Höhe deines Headers dann nicht mehr fixed ist - aber das Bild sollte immer vollständig zu sehen sein.

Seite 1 von 4 123 ... LetzteLetzte

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •