Escapace / Problem mit Header-Bild

    Guten Tag,

    ich bin dabei einen Website mit Escapade einzurichten (http://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

    • Gerade eben
    • 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

    Teste bitte, ob dich der CSS Code...

    CSS
    #masthead {
  background-position: center center !important;
}


    im zusätzlichen CSS des Customizers deinem Wunsch näher bringt.

    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

    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

    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

    @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

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden