title: Bootstrap: How to position Image in Centre absolute?
body: <p>How can I place image in centre of page, behind the <code>&lt;div&gt;</code> in responsive html.</p>
  
  <p>I am using <code>IMG</code> with position <code>absolute</code>
  and <code>DIV</code> - position <code>relative</code></p>
  
  <p>so IMG is behind this is what i wanted but when i resize screen IMG get wrong positions always any fix for this ? </p>
  
  <p>HTML : </p>
  
  <pre><code>&lt;div class="col-md-6 text-center center-block"&gt;
              &lt;img src="../res/uvod-ahoj.png" class="" alt="" id="uvod-ahoj"&gt;
              &lt;div id="uvod-ahoj-div"&gt;
                  &lt;h1&gt;Ahoj, som...&lt;/h1&gt;
                  &lt;p&gt;
                      &lt;strong&gt;Marcela Špalková&lt;/strong&gt; a s pekným oblečením sa kamarátim od malička. Začalo to listovaním módnych
                      časopisov, pokračovalo vymýšľaním vlastných outfitov a šitím šiat pre bábiky. Táto moja vášen
                      sa naplno prejavila pri nákupoch, vyberala som kúsky nielen pre seba, ale aj pre kamarátky.
                  &lt;/p&gt;
                  &lt;a href="" class="btn" id="uvod-btn"&gt;POZRIEŤ MOJE SLUŽBY&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS : </p>
  
  <pre><code>#uvod-ahoj {
  position: absolute;
  right: 0;
  left: 14%;
  }
  #uvod-ahoj-div {
  position: relative;
  color: white;
  background-color: #780d4f;
  }
  #uvod-ahoj-div &gt; h1 {
  color: white;
  margin: 3rem 0;
  padding: 3rem 0 0 0;
  }
  #uvod-ahoj-div &gt; p {
  margin: auto;
  max-width: 60rem;
  padding-bottom: 3rem;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/6uCDr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6uCDr.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/t5zka.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t5zka.png" alt="enter image description here"></a></p>