Weitere Informationen und den Download findest du auf der offiziellen Anlaufstelle de.wordpress.org
Ergebnis 1 bis 8 von 8
Like Tree3Likes
  • 1 Post By SirEctor
  • 1 Post By Henk1060
  • 1 Post By Henk1060

Thema: Header Bild verkleinern, wie? - Klopp Theme

  1. #1
    PostRank: 1
    Registriert seit
    12.08.2017
    Beiträge
    38

    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 www.alldus.de .. 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


  2. #2
    PostRank: 10 Avatar von SirEctor
    Registriert seit
    28.10.2008
    Beiträge
    9.606
    Hast du schon
    Code:
    #masthead {
        background-size: auto !important;
    }
    versucht?
    David Pka likes this.
    Das Geheimnis des Könnens liegt im Wollen!

  3. #3
    PostRank: 1
    Registriert seit
    12.08.2017
    Beiträge
    38
    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.Abstand.jpg

  4. #4
    PostRank: 9
    Registriert seit
    04.09.2014
    Beiträge
    1.410
    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
    Geändert von Henk1060 (10.09.2017 um 14:17 Uhr)
    David Pka likes this.

  5. #5
    PostRank: 1
    Registriert seit
    12.08.2017
    Beiträge
    38
    Perfekt, Danke! Hat auf anhieb funktioniert!

  6. #6
    PostRank: 1
    Registriert seit
    12.08.2017
    Beiträge
    38
    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:

    Code:
    @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?

  7. #7
    PostRank: 9
    Registriert seit
    04.09.2014
    Beiträge
    1.410
    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;
    }
    David Pka likes this.

  8. #8
    PostRank: 1
    Registriert seit
    12.08.2017
    Beiträge
    38
    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..

Berechtigungen

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