title: How can I center an image on top of a hero section?
body: <p>I have a hero section I'm building that I need to place an image in the center of. The question is, how do I do that.</p>
  
  <p>The image is what I need to achieve. The "Top 50" badge that's in the middle of the hero section is what I need to try and place over top of the "Banner" in the background.</p>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/upenasyk/2/" rel="nofollow noreferrer">https://jsfiddle.net/upenasyk/2/</a></p>
  
  <p>The simple HTML and CSS code for the split hero section is below:</p>
  
  <pre><code>    &lt;div class="container"&gt;
      &lt;div class="row"&gt;            
          &lt;div class="trsc-top-50-image col-lg-6"&gt;
          &lt;/div&gt;
          &lt;div class="trsc-top-50-text col-lg-6"&gt;
              &lt;div class="hero-content split-hero-content"&gt;
                  &lt;div class="hero-content-inner"&gt;
                      &lt;h3&gt;What is the TrialScout Top 50?&lt;/h3&gt;
                      &lt;p&gt;
                          The TrialScout Top 50 was established to recognize the elite clinical research programs driving American healthcare forward. Hospitals are selected based on their exceptional performance in quality, research
                          experience, infrastructure and patient experience.
                      &lt;/p&gt;
                      &lt;p&gt;
                          With TrialScout’s comprehensive global data set, hospitals are chosen by their assembled composite score. Composite scores are compiled with data collected from all active United States clinical research institutions and linked to numerous, other publicly available data sets, as well as ongoing, real-time direct patient feedback.
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.trsc-top-50-image {
      background-image: url('images/TSTop50HeroImage.png');
      background-size: cover;
  
  }
  
  .trsc-top-50-text {
      background-image: linear-gradient(-135deg, #73c389, #5fc3c1);
  }
  
  
  .hero-content-inner {
      margin: 10%;
  }
  
      .hero-content-inner h3 {
          /*margin: auto;*/
          color: #0A5D66;
          text-align: center;
          font-weight: bold;
          font-size: 1.5em;
      }
  
      .hero-content-inner p {
          font-family: 'Roboto', sans-serif;
          font-size: 14px;
          color: black;
      }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/LcIiE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LcIiE.png" alt="enter image description here"></a></p>