1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Escapace / Problem mit Header-Bild

Dieses Thema im Forum "Design" wurde erstellt von kipp51, 7. Juni 2020.

  1. kipp51

    kipp51 Member

    Registriert seit:
    7. Juni 2020
    Beiträge:
    6
    Zustimmungen:
    0
    Guten Tag,

    ich bin dabei einen Website mit Escapade einzurichten (www.tv-kippenheim.de/wp) und habe das Problem, dass das Header-Bild nicht propotional zum Fenster verkleinert wird, sondern Spünge macht und zu groß und abgeschnitten erscheint. Bei einer anderen (noch im Aufbau befindlichen) Website mit Twenty Fourteen funktioniert das einwandfrei.
    Da Twenty Fourteen aber keine Möglichkeiten bietet, mit Farben zu spielen (außer, wenn man ins Eingemachte geht, und so weit bin ich noch nicht), gefällt mir Escapade in diesem Fall besser. Oder gerne ein anderes Theme mit vertikalem Menü und guter Farbanpassung.
    Hat jemand eine Idee, wie ich das mit dem Header-Bild hinbekommen könnte?
    Danke und eine coronenfreie Zeit
    Hans
     
  2. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Teste bitte, ob dich der CSS Code...
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    im zusätzlichen CSS des Customizers deinem Wunsch näher bringt.
     
  3. kipp51

    kipp51 Member

    Registriert seit:
    7. Juni 2020
    Beiträge:
    6
    Zustimmungen:
    0
    Lieber Sailor56,

    so schnell und so zielführend! DANKE
    Ich sach ma: Überwiegend.

    Das Bild soll ja (gemäß Customizer) 2400x1300 sein. Ich hatte versucht, das Theme zu überlisten und ein so großes Bild mit transparentem Hintergrund erstellt und das Logo in diesem Bild kleiner und mittig eingefügt. Alles in der Hoffung, dass das Logo immer komplett zu sehen sei. War's aber nicht.

    Der Customizer hat ja unten die drei Bildchen für Desktop, Tablet und Handy. Desktop und Tablet sind jetzt ok, bei Handy wird noch abgeschnitten. Aber vielleicht kann ich da noch ein wenig mit dem eingefügten Bild rumspielen.

    Da ich gerne weiß, was ich tue: Kannst Du mir sagen, warum zum einen "center" zweimal angegeben ist und was "!important" dabei noch macht? War bisher mit DreamWeaver unterwegs und habe da immer nur ein Argument eingefügt. Und woher weißt Du das mit dem "#masthead"? Wo sehe ich sowas nach?

    Nochmal DANKE und noch einen guten Restsonntag
    Hans
     
  4. kipp51

    kipp51 Member

    Registriert seit:
    7. Juni 2020
    Beiträge:
    6
    Zustimmungen:
    0
    Nachtrag:
    Hab jetzt mal verschiedene Versionen (mit und ohne Hintergrund mit Photoshop erstellt) ausprobiert: Die Handyversion wird immer beschnitten. Getestet mit FF, Opera und Edge
     
  5. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Zum grundlegenden Problem muss ich sagen, dass Bilder, die in einem Container als Hintergrundbild eingefügt sind immer etwas Problematisch sind, denn sie belegen keinen Raum/Platz innerhalb des Containers - sind eben nur Hintergrund.
    Bilder haben aber auch Proportionen (deine 2400x1300 px) zB... und wenn diese Proportionen nicht mit dem Proportionen des Containers übereinstimmen - schlimmer noch, wenn diese Proportionen des Containers sich ändern (bei unterschiedlichen Bildschirmgrößen), dann passiert genau das, was du feststellst. Das Bild wandert im Rahmen und wird teilweise abgeschnitten.
    Mit meinem kleinen Code-Schnippsel habe ich als ersten Versuch etwas zu verbessern das Bild erst in der Mitte des äußeren Containers zu fixieren... deswegen 'center center' für horizontale und vertikale Zentrierung.
    https://www.w3schools.com/cssref/pr_background-position.asp
    Wenn das schon ausreichen ist, um dein Problem zu lösen - OK... wenn nicht, müsste und kann man da noch etwas nachbessern. Je nach dem, wie sich das Bild nach der Änderung verhält.
    Was bewirkt das '!important'?
    Im CSS haben einige Formatierungen eine höhere Wirkung als andere - in deinem Fall sind die Formatierungen, die geändert werden sollen, in einem so genannten 'inline-style' eingefügt. Also in dem entsprechenden HTML-Tag mit 'style="...." ' eingefügt. Dieses sind die dominantesten Formatierungen und überschreiben alle anderen Formate. Der einzige Weg, um das trotzdem zu ändern, ist eben diese Markierung mit '!important'. Würde den Rahmen sprengen, um das hier weiter zu erläutern, aber eine kurzer Einstie dazu ist hier...
    https://www.css-hack.de/CSS+allgemein/%21+important
     
  6. kipp51

    kipp51 Member

    Registriert seit:
    7. Juni 2020
    Beiträge:
    6
    Zustimmungen:
    0
    @Sailor56
    Auch wenn's jetzt ne Weile gedauert hat: Ganz herzlichen Dank!
    Dann ist die center-center-Sache analog den Argumenten bei zu Beispiel padding mit den 4 Richtungen. Wenn man sich ne Weile nicht intensiv mit etwas beschäftigt, verflüchtigt sich das Wissen mit der Zeit. Im Moment brechen gerade ein paar andere Themen über mich herein, so dass der Turnverein etwas warten muss. Aber Deine Unterstützung ist mir eine große Hilfe. Ich kann mit dem jetzigen Zustand gut leben und arbeiten.
    Solltest Du Zeit für noch eine Info haben: Besteht WordPress nur aus php-Dateien oder gibt es irgendwo auch eine "echte" html-Datei?
    Ja, ich hatte nicht daruf geachtet, dass das nur ein Hintergrundbild ist; aber jetzt habe ich erst mal ein großes Problem weniger. DANKE
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden