title: Wordpress Cannot display correctly index page header image
body: <p>on a friend's site , I am trying to help him display correctly the index page banner. The used theme is Arcade Basic (Batovasan) </p>
  
  <p>The image uploaded in the library is 1920x500px (150dpi) , the generated html code is :</p>
  
  <pre><code>&lt;header id="header"&gt;
      &lt;div class="title-card-wrapper"&gt;
           &lt;div class="title-card" style="height: 778px;"&gt;
              &lt;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%;"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>the image is automatically set as enlarged with an auto negative left position...   ( see <a href="http://www.tangoumois.com" rel="nofollow noreferrer">http://www.tangoumois.com</a> )</p>
  
  <p>the current css is </p>
  
  <pre><code>.title-card {
    position: relative; }
  
  .title-card-wrapper {
    overflow: hidden; }
  
  .title-card {
    z-index: 1;
    width: 100%;
    display: table;
    text-align: center; }
    .title-card &gt; img.header-img {
      position: absolute;
      z-index: 0;
      left: -9999px;
      max-width: none; }
  </code></pre>
  
  <p>and in the function.php, there is a filter to upload and resize the image </p>
  
  <pre><code>// 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' =&gt; false,
      'flex-height' =&gt; true,
      'flex-width' =&gt; true,
      'random-default' =&gt; false,
      'width' =&gt; apply_filters( 'bavotasan_header_image_width', 1920 ),
      'height' =&gt; apply_filters( 'bavotasan_header_image_height', 500 ),
  ) );
  </code></pre>
  
  <p>when I check it with Chrome Dev, I get the following</p>
  
  <p><a href="https://i.stack.imgur.com/bc5fi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bc5fi.png" alt="calculated box sizing "></a></p>
  
  <p>How can I set correctly the banner , without this negative positions .. </p>