Flexible Header-Grafik?

philine

Ich habe immer noch ein Problem mit meiner Header-Grafik und hoffe, dass mir auch diesmal hier geholfen werden kann :-)
Hab über den Customizer ein Bild eingebunden und hatte eigentlich erwartet, dass es sich der jeweiligen Bildschirmbreite anpasst.
Leider wird es bei Monitoren mit anderen Maßen/Auflösung abgeschnitten oder es entstehen weiße Flächen links und rechts.
Ich will aber, dass das Bild immer bildschirmfüllend angezeigt wird.
Hab leider kaum Ahnung von php, dachte dass "flex-width' => true" die Lösung wäre, aber nein :-(

So sieht die header.php aus:

function education_hub_custom_header_setup() {
add_theme_support( 'custom-header', apply_filters( 'education_hub_custom_header_args', array(
'default-image' => 'http://neu.lessing-gymnasium.eu/wp-content/upl…er-Header3d.jpg',
'default-text-color' => '666666',
'header-text' => false,
'width' => 1420,
'height' => 550,
'flex-height' => true,
'flex-width' => true,
) ) );

Was mache ich falsch? :-(

Danke und LG
philine

PS: geht um neu.lessing-gymnasium.eu

Werbepost

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

maxe

wie sieht denn der img Tag im Header aus?

philine

Ääähm..was genau meinst du? :oops:
In der custom-header.php gibt es nur 'default-image', siehe oben.
Dann gibt es eine header.php, da ist aber kein img Tag drin.
In der style.css gibt es zwei img Tags :?:,
einmal unter #elements:
img {
height: auto; /* Make sure images are scaled correctly. */
max-width: 100%; /* Adhere to container width. */
}
und dann unter
.wp-caption img[class*="wp-image-"] {
display: inline-block;
margin-left: auto;
margin-right: auto;
}
Meinst du irgendwas davon? :confused:

Azrael_0815

Dein Theme setzt das Image als Background-image.

url("http://neu.lessing-gymnasium.eu/wp-content/upl…er-Header3d.jpg");

Also probiere mal:

#masthead {

}

zu ändern, indem du

background-size: 100% auto

einfügst.

Gast 100035

Wenn Dein Banner für alle (oder zumindest die meisten) Bildschirmgrößen monitordeckend sein soll, würde ich die Bannerbreite auf 1920 px vergrößern. Ich habe jetzt keine Farbanpassung für den Hintergrund gemacht. Ich würde auch die Höhe etwas verringern und insgesamt internetmäßig komprimieren. Deine Headergrafik hat 633 KB, meine etwas über 60 KB.

Sailor56

Versuche es doch mal mit...

#masterhead {
...
...
background-size: cover;
}

philine

Danke für die Tipps, aber leider klappt es nicht :-(
Habe die [COLOR=#333333]Bannerbreite auf 1920px vergrößert, dann wird bei mir das Bild links und rechts abgeschnitten.
Hab sowohl "[/COLOR][COLOR=#333333]background-size: cover" als auch "[/COLOR][COLOR=#333333]background-size: 100% auto" ausprobiert, aber es tut sich nichts.
[/COLOR][COLOR=#333333]Hat noch irgendwer eine schlaue Idee? [/COLOR]:???::???:[COLOR=#333333]

[/COLOR]

Sailor56

Sorry, aber dann ist irgendetwas anders bei dir nicht richtig!
Mit 'background-size: cover;' sieht das bei mir so aus:

Oder wie soll es aussehen?

PS: das ist die Ansicht mit FireFox Webentwickler Tool 'Inspektor'. Im unteren Bereich links (blau hinterlegt) das gewählte Element - im unteren Bereich rechts das dazugehörige CSS.
Kann man da auch direkt zum testen ändern und schauen, wie es sich auswirkt.

philine

Ja, genau so soll es aussehen..
Aber bei mir und an einem anderen Monitor mit kleinerer Bildschirmbreite als 1920 sieht es so aus:
(hab [COLOR=#333333]'background-size: cover;' eingefügt)[/COLOR]

Irgendwo versteckt sich wohl ein Fehler, aber ich finde ihn einfach nicht :cry:

Sailor56

Ahhhh.... jetzt kommen wir der Sache näher. Ich sehe, was das Problem ist.
Das Bild hat vorgegebene Proportionen in Höhe und Breite - ebenso hat dein Header Proportionen, die allerdings variabel sind. Zumindest die Breite richtet sich immer nach der Bildschirmauflösung.
Solange die Proportionen von Bild und Bildschirm passen, sieht es gut aus, aber in dem Moment, wo (wie in deinem Fall) der Platz in der Breite nicht ausreicht, fängt die Webseite/ der Browser an es zu korrigieren... na ja, er versucht sein Bestes.
Folgende Idee: Mit dem jetzigen Layout als Hintergrundbild im Header werden wir das Problem so leicht nicht lösen können - aber, wäre es möglich das Bild als <img..> in den Header einzufügen.
Dem Bild kann man einen 'width: 100%;' geben und dem Header müsste man alles Größenangaben (auch 'padding') wegnehmen. Seine Größe richtet sich dann nach dem Inhalt (dem Bild).
Hätte den Nachteil, dass die Höhe deines Headers dann nicht mehr fixed ist - aber das Bild sollte immer vollständig zu sehen sein.

Sailor56

Ich habe das jetzt mal getestet (mit FireFox 'Inspektor')!
Was habe ich gemacht?
1. IMG Tag in
<header id="masterhead" class="site-header"...>
<img src="http://neu.lessing-gymnasium.eu/wp-content/upl…ader3d_1920.jpg" style="width: 100%; margin-bottom: -5px;">
...
</header>

2. Custom CSS für class="site-header" padding auf 0px gesetzt:
.site-header {
padding: 0px !important;
}

und so sieht es dann bei mir mit dem FireFox aus:
280 Pixel breit (Handy)

680 Pixel breit (noch Handy - fast Tablet)

1024 Pixel breit (Standard VGA)

1600 Pixel breit (Desktop / Laptop) sieht genau so gut aus - kann aber hier leider nur jeweils 3 Bilder hochladen.

philine

Juhuu, das sieht schonmal super gut aus, Danke! Mir ist nur noch nicht ganz klar, wo ich den img Tag einfügen muss? In der style.css oder der custom-header.php (oder ganz woanders?)

Sailor56

header.php ist der richtige Ort... und zwar direkt hinter dem '<header id="masterhead"....> Tag.
Dann müsstest du noch deine Formatierung mit der Einfügung der Hintergrundgrafik (siehe dein erster Post) entfernen... am besten auskommentieren.
im php durch:
/* .. auskommentierter Inhalt.. */
im html durch

löschen würde ich es nicht, denn das ist eine Rückfallposition, die man vielleicht irgendwann mal wieder braucht.
Die Formatanweisung mit dem
.site-header {
padding: 0px !important;
}
gehört dann natürlich in das Custom CSS.

Du solltest, falls du es nicht noch nicht gemacht hast, dir ein 'Child-Theme' anlegen und die Änderungen dort durchführen, denn sonst kann es dir passieren, dass mit dem nächsten Update deines Themes alles wieder auf Anfang gesetzt wird... das Child-Theme würde aber erhalten bleiben.

philine

Also irgendwie bin ich zu blöd die richtige Stelle zu finden. In meiner header.php gibt es keinen '<header id="masterhead"....> Tag. Auch nicht in der custom-header.php.
:confused:

Die einzigen Stellen wo ich überhaupt die id #masthead finde ist in der functions.php:

if ( has_header_image() ) {
$custom_css = '#masthead{ background-image: url("' . esc_url( get_header_image() ) . '"); background-repeat: no-repeat; background-position: center center; }';
wp_add_inline_style( 'education-hub-style', $custom_css );
}

Jetzt bin ich ehrlich gesagt wieder komplett verwirrt :-/

Sailor56

Leider kenne ich dein Theme überhaupt nicht, da ich mit WP nur lokal und mit den Standardthemes 'rumspiele'! Aber da sieht das so aus... (z.B. header.php für twentyseventeen)

HTML

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */


?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">


<?php wp_head(); ?>
</head>


<body <?php body_class(); ?>>
<div id="page" class="site">
        <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a>


        <header id="masthead" class="site-header" role="banner">


                <?php get_template_part( 'template-parts/header/header', 'image' ); ?>


                <?php if ( has_nav_menu( 'top' ) ) : ?>
                        <div class="navigation-top">
                                <div class="wrap">
                                        <?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
                                </div><!-- .wrap -->
                        </div><!-- .navigation-top -->
                <?php endif; ?>


        </header><!-- #masthead -->


        <?php
......

Alles anzeigen

In deinem Theme muss es auch sowas geben - da wo die <!DOCTPE HTML> Angabe steht, der <head>.. </head> Bereich eingefügt wird - und dann, der interessante Teil, der <body> Tag steht... dahinter muss dann der <header> zu finden sein.

Aber vielleicht gibt es hier ja auch jemanden, der dein spezielles Theme kennt.

Sailor56

Ich habe mal den Herrn 'Google' gefragt und glaube, ich habe die Stelle zum Einfügen des Bildes in den Header gefunden.
In deinem Themen Ordner gibt es einen Unterordner 'inc' und darin einen Ordner 'hook' und in diesem Ordner eine Datei 'structure.php'!
Wenn du da so etwa 100 Zeilen runter scrollst, dann findest du folgenden Eintrag:

HTML

function education_hub_header_start() {
        ?><header id="masthead" class="site-header" role="banner"><div class="container"><?php
        }

Wenn du diese Passage wie folgt ergänzt, dann sollte es klappen:

HTML

function education_hub_header_start() {
        ?><header id="masthead" class="site-header" role="banner">
        <img src="http://neu.lessing-gymnasium.eu/wp-content/uploads/2017/08/cropped-HP-Neuer-Header3d_1920.jpg" style="width: 100%; border: 0px; margin-bottom: -5px;" alt="Logo Header">
        <div class="container"><?php
        }

Viel Erfolg... wie gesagt, ich kann es selber nicht testen - aber ich bin zuversichtlich :-)!

philine

Yeeeeaaaaaah! Es hat geklappt! Du bist super, tausend Dank :-D

Sailor56

Uhhh... da bin ich aber froh! So im Dunkeln herumtappen und es selber nicht testen zu können, ist normalerweise nicht so mein Ding! Aber wenn es jetzt klappt, dann bin ich gerne mal meinen sonstigen 'Gewohnheiten' untreu geworden.

SirEctor

Du solltest das unbedingt in einem Child-Theme ändern, sonst sind bei einem Theme-Update diese Änderungen wieder weg.

rafael_

Hallo :)

Ich stehe vor dem gleichen Problem wie philine.
Ich habe das Theme Chosen und die Wordpress Version 4.8.1 installiert. Jetzt wollte ich den
Header anpassen, so dass das Hintergrundbild bis zum Seitenrand geht. Leider ohne Erfolg, so
wie im Screenshot zu sehen ist.

So sieht die Header.php vom Theme Chosen aus:

HTML

<!DOCTYPE html>


<html <?php language_attributes(); ?>>


<head>
        <?php wp_head(); ?>
</head>


<body id="<?php print get_stylesheet(); ?>" <?php body_class(); ?>>
        <?php do_action( 'body_top' ); ?>
        <a class="skip-content" href="#main"><?php _e( 'Skip to content', 'chosen' ); ?></a>
        <div id="overflow-container" class="overflow-container">
                <div id="max-width" class="max-width">
                        <?php do_action( 'before_header' ); ?>
                        <header class="site-header" id="site-header" role="banner">
                                <div id="menu-primary-container" class="menu-primary-container">
                                        <?php get_template_part( 'menu', 'primary' ); ?>
                                        <?php get_template_part( 'content/search-bar' ); ?>
                                        <?php ct_chosen_social_icons_output(); ?>
                                </div>
                                <button id="toggle-navigation" class="toggle-navigation" name="toggle-navigation" aria-expanded="false">
                                        <span class="screen-reader-text"><?php _ex( 'open menu', 'verb: open the menu', 'chosen' ); ?></span>
                                        <?php echo ct_chosen_svg_output( 'toggle-navigation' ); ?>
                                </button>
                                <div id="title-container" class="title-container">
                                        <?php get_template_part( 'logo' ) ?>
                                        <?php if ( get_bloginfo( 'description' ) ) {
                                                echo '<p class="tagline">' . esc_html( get_bloginfo( 'description' ) ) . '</p>';
                                        } ?>
                                </div>
                        </header>
                        <?php do_action( 'after_header' ); ?>
                        <section id="main" class="main" role="main">
                                <?php do_action( 'main_top' );
                                if ( function_exists( 'yoast_breadcrumb' ) ) {
                                        yoast_breadcrumb( '<p id="breadcrumbs">', '</p>' );
                                }

Alles anzeigen

Wenn ich dort den Code[COLOR=#3E3E3E]
[/COLOR]

HTML

<img src="wp-content/uploads/2017/08/cloud.jpg" style="width: 100%; margin-bottom: -5px;">

im <header> </header> Bereich einfüge, wird das Bild oberhalb des Headers eingefügt und danach kommt erst der eigentliche Header.
Einmal als Screenshot dazu:

Füge ich das Bild im <head> </head> Bereich ein:

HTML

<!DOCTYPE html>


<html <?php language_attributes(); ?>>


<head>
        <img src="wp-content/uploads/2017/08/cloud.jpg" style="width: 100%; margin-bottom: -5px;">
        <?php wp_head(); ?>
</head>

Ist das Bild bis zum Seitenrand, aber der Header befindet sich unterhalb des Bildes.

Ich habe irgendwie einen Denkfehler. Vielleicht hat jemand einen Tipp für mich ;)

Gruß Rafael

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Flexible Header-Grafik?

Jetzt mitmachen!