Header Bild verkleinern, wie? - Klopp Theme

  • Hallo Leute,

    ich brauche mal wieder eure Hilfe.
    Zunächst einmal; Ich benutze das Klopp Theme und die Seite lautet [URL="http://alldus,de"]http://www.alldus.de[/URL] .. Für mein Problem habe ich weder hier noch auf Google hilfe dazu gefunden.
    Jegliche gefundene Codes im .php oder per CSS haben mir auch nicht geholfen, meistend hat sich garnichts geändert.

    Und zwar möchte ich mein Header Bild etwas verkleinern. Es hat Original aktuell eine Auflösung von etwa 1.440 x 380 Pixel.
    Mit dieser Größe nimmt das Header Bild schon 1/3 des Bildschirmmonitors ein, was ich noch eindeutig zu groß finde.
    Daher möchte ich es etwas verkleinern, das es villeicht nur 1/4 Monitor Bildschirmplatz einnimmt.

    Wenn ich das Originale Bild in Photoshop bearbeite und ihm eine Auflösung von ~ 800 x 200 gebe und es auf WP hochlade, dann wird es immer auf die Monitorbreite gezogen und wird dabei total unscharf.. Im style.php habe ich zum ändern dieser automatischen Größe für den Header auch ncihts gefunden..

    Habt ihr einen Lösungsansatz für mich?

    Im voraus vielen vielen Dank!

    LG David

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Hast du schon

    CSS
    #masthead {
        background-size: auto !important;
    }


    versucht?

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Besten Dank SirEctor! Den gleichen Code hatte ich so noch nicht gehabt, aber dieser hat sofort funktioniert!
    Jetzt habe ich allerdings den Abstand zwischen Header und "Die Suche Leiste" welcher sich nicht nach oben gerührt hat.. Wie bekomme ich den weiter hoch?

    Bild hänge ich mal als Anhang bei.

  • hy,

    das problem ist die mind höhe, die zweimal in der css vorhanden ist.

    #masthead .layer { background: rgba(0, 0, 0, 0.05); min-height: 380px; }
    #masthead { text-align: center; min-height: 380px; position: relative; z-index: 90; }

    die könnest du anpassen min-height

    Einmal editiert, zuletzt von Henk1060 (10. September 2017 um 14:17)

  • Und dann müsste ich jetzt nochmal den Code für die mobile Ansicht ändern, da mir der Header auf dem Handy nur halb angezeigt wird.

    Mein verwendeter Code lautet:

    CSS
    @media screen and (max-width: 667px) {
      #masthead, #masthead .layer {min-height:0 !important;}
    }

    wenn ich die 667px auf 100% änder, dann ist das Logo in der mobilen Ansicht in der Höhe komplett drauf, jedoch fehlt links und rechts etwas..
    Bekommen wir das auch noch hin?

  • ist klar,
    Jetzt müsstest du für die media 667 breite auch hier die hintergrund grösse anpassen.
    jedoch überschreibt hier important alle werte


    #masthead {
    background-size: auto !important;
    }

  • Jetzt habe ich da mal ein wenig rumgespielt und es einigermaßen hinbekommen. Ansicht auf dem Computer und auf dem Handy in Querformat ist super, nur hab ich da immernoch einen kleinen Abstand wenn ich das Handy im hochformat halte..

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!