Wordpress Kann nicht richtig anzeigen Indexseite Headerbild

Question

auf der Website eines Freundes, versuche ich ihm zu helfen, korrekt das Indexseite Banner anzuzeigen. Das verwendete Thema ist Arcade Basic (Batovasan)

Das Bild in der Bibliothek hochgeladen ist 1920x500px (150dpi), die erzeugte HTML-Code ist:

<header id="header"> 
    <div class="title-card-wrapper"> 
     <div class="title-card" style="height: 778px;"> 
      <img class="header-img" src="http://www.example.com/wp-content/uploads/myHeader.jpg" alt="" style="position: absolute; left: -667px; top: 0px; right: auto; bottom: auto; width: auto; height: 100%;"> 
     </div> 
    </div> 
</header> 

das Bild wird automatisch als vergrößert mit einem Auto negativen links eingestellt Position ... (siehe http://www.tangoumois.com)

die aktuelle CSS ist

.title-card { 
    position: relative; } 

.title-card-wrapper { 
    overflow: hidden; } 

.title-card { 
    z-index: 1; 
    width: 100%; 
    display: table; 
    text-align: center; } 
    .title-card > img.header-img { 
    position: absolute; 
    z-index: 0; 
    left: -9999px; 
    max-width: none; } 

und in der function.php gibt es einen Filter zu laden und die Größe das Bild

// Add a filter to bavotasan_header_image_width and bavotasan_header_image_height to change the width and height of your custom header. 
add_theme_support('custom-header', array(
    'header-text' => false, 
    'flex-height' => true, 
    'flex-width' => true, 
    'random-default' => false, 
    'width' => apply_filters('bavotasan_header_image_width', 1920), 
    'height' => apply_filters('bavotasan_header_image_height', 500), 
)); 

, wenn ich es mit Chrome Dev überprüfen, bekomme ich left: -9999px; folgenden

Wie kann ich richtig das Banner gesetzt, ohne diese negativen Positionen ..

Answer 1

entfernen von diesem block auf chane es auf left: 0; (besser zu entfernen)

 .title-card > img.header-img { 
     position: absolute; 
     z-index: 0; 
     left: -9999px; 
     max-width: none; } 

So

Answer 2

Sie das Bild innerhalb des Tags verwenden, während Sie es in der Hintergrundebene zu haben versuchen zu,

Also für Sie meine grundlegende Lösung ist ein Stück Code zu ändern, löschen Sie die Zeile, Zum CSS und dies tun:

#site-meta{ 
    background: url(http://www.tangoumois.com/wp-content/uploads/2017/03/Bannière-PageActualité.jpg); 
    background-size: contain; 
    background-repeat: no-repeat; 
} 

Bild>https://image.ibb.co/jpZQJv/Capture.png Beschreibung:

wenn Sie ein Bild im Hintergrund des div haben wollen, müssen Sie es tun mit CSS verwenden (background: url (''); ..

Wenn Sie verwenden es mit dem Image-Tag halten möchten, sollten Sie Ihre div Höhe ändern, um die Bildhöhe zu entsprechen, so dass Sie die Räume vermeiden ..

Answer 3

Sie haben viele unnötige CSS-Stile. Außerdem ist es wahrscheinlich besser in diesem Fall background-image als img zu verwenden.