Support » Allgemeine Fragen » 2013 theme header background image

  • Hallo Zusammen,
    Habe vor einigen Wochen angefangen mich intensiver mit WordPress zu beschäftigen. Mein Theme ist 2013.
    Ein childTheme mit der style css( 1zu1kopie vom parent ), header und function.php habe ich eingerichtet.
    1.Seit 3 Tage stehe ich vor einem Problem und krieg es nicht gelöst. Ich würde gerne den header in der Höhe vergrössern und zwar so das egal auf welchem Gerät, ob Portrait oder landscape, das background image immer die komplete display höhe ausnutzt. Alle versuche im style.css haben nichts gebracht.. entweder auf landscape zu kurz und im Portrait passend oder im landscape passend und im Portrait zu hoch.
    2. Würde gerne die Hauptnavigation oben fixen. Sie soll immer Sichtbar bleiben. Die Hauptnavigation habe ich schon im header nach oben versetzt aber mit dem fixen klappt es nicht.Hab auch keine Idee wie ich das hinkriegen soll. Mit position: absolute hat es schon mal nicht geklappt. Irgendwas übersehe ich da.

    Beispiel

    Hoffe das mir jemand helfen kann.

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)
  • Nachtrag: Punkt 2 hab ich hin bekommen. Den z-index vergessen…

    So läufts:

    .navbar {
            position:fixed; /*!*/
            z-index: 99; /*!*/
            box-shadow: 0 2px 10px #555; /*!*/
    	background-color: #eae7d0;
    	margin: 0 auto;
    	max-width: 1600px;
    	width: 100%;
    }

    Bleibt „nur“ noch Punkt 1.

    Ein childTheme mit der style css( 1zu1kopie vom parent ), header und function.php habe ich eingerichtet.

    Ein Child-Theme soll keine 1:1-Kopie des Parent-Theme sein, sondern das Parent-Theme um die gewünschten Abweichungen ergänzen. Das Parent Theme komplett zu kopieren ist deshalb der falsche Weg.

    Richtig ist, wenn Du in der functions.phh des Child Themes eine Funktion hinzufügst, die das Style-Sheet des Parent Theme und ein ergänzendes Theme des Child Theme einbindet:

    function theme_enqueue_styles() {
    
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'child-style',
            get_stylesheet_directory_uri() . '/style.css',
            array( 'parent-style' )
        );
    }
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

    Deine erste Frage verstehe ich nicht. Geht es darum, dass die Abmessungen des Hintergrundbildes bei kleineren Displays reduziert werden? Das erfolgt mit Hilfe der Media-Query, die die Bildbreite auf 768px festlegt und die Höhe entsprechend proportional anpasst.

    @media (max-width: 767px)
    .site-header {
        background-size: 768px auto;
    }

    … wobei sich die Höhe der Kopfzeile aus dem Innenabstand der Beschriftung ergibt.

    @media (max-width: 767px)
    .site-title {
        font-size: 36px;
        padding: 8px 0 10px;
    }

    Vielleicht beschreibst Du nochmal, wie Du dir das Layout vorstellst?

    Hallo Mario Garde,
    Erstmal vielen Dank für deine Hilfe.. mit dem Child Theme ist notiert und werde es dem entsprechend ändern, nochmals Dank. Hab oben in meinen Anliegen einen Link hinterlegt (Beispiel). Dieser Link verweist auf eine Website die genau das macht was ich möchte.
    Wenn man die Seite öffnet sieht man ein Fullscreen Image und oben das fixed Navigations Menü. Wenn man scrollt erkennt man das der Header mit der unter Kante des Bildschirms abschliesst.
    Um es auf den Punkt zubringen. Egal ob es ein Smartphone/Tablet oder Desktop Pc/Laptop ist, egal wie man das Gerät hält ob quer oder hoch, das Header Backgroundimage ist immer Fullscreen sichtbar und schliesst mit der unter Kante des Bildschirms ab und via Anker verlinkung scrollt man sich in den Content.. Der Header paßt sich also grundsätzlich an dem Bildschirm an. Aus einer naiven Logik heraus sollte eigentlich ein height: 100%; reichen. Den die Höhe ist ja bekanntlich bei jedem Gerät anders. Aber wo setze ich bei diesem Theme an?
    Ich hoffe ich konnte mein Anliegen einigermaßen Verständlich erklären.

    Zur Sicherheit hier nochmal der Link zu meinem Vorbild.
    http://www.novesia-allstars.de/
    Gruß Ghani

    Ups, den Link hatte ich doch glatt übersehen. Sorry.

    In Cascading Style Sheets ist es etwas kniffelig, eine Höhe von 100% zu bestimmen, da im Gegensatz zur Breite nicht ganz eindeutig ist, auf was sich die Höhe beziehen soll. Ich tue mich etwas schwer das zu erklären. Vielleicht hilft Dir dieser (englische) Beitrag weiter. Die Lösung ist jedenfalls, die Höhe nicht nur für den Header, sondern auch für die umgebenden HTML-Tags zu bestimmen:

    html, body, .site, .site-header {
        height: 100%;
    }
    .site {
    max-width: 100%;
    }
    .site-header {
    background-size:cover
    }

    Achte bei dem Hintergrundbild auf eine möglichst kleine Dateigröße, da sonst die Website (mobil? 3G oder schlechter?) elend langsam lädt.

    Guten Morgen,
    danke für Deine Hilfsbereitschaft. Hab mir sowas schon fast gedacht. Der Hinweis auf den englischen Beitrag ist schon mal Gold wert. Bringt mich definitiv weiter. Werd mal weiter Doktoren und wenn ich es hingekriege poste ich das gerne hier weiter. Falls es noch weitere Hinweise gibt, die mich meinem Ziel näherbringen, gerne immer her damit.
    Danke und Gruß

    Viel mehr Hinweise als die fertigen CSS-Regeln kann ich Dir nicht geben.

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)
  • Das Thema „2013 theme header background image“ ist für neue Antworten geschlossen.