title: Absolute positioned image in responsive design
body: <p>I am in need of some assistance. </p>
  
  <p>I am currently working on a site that is going to be responsive.<br>
  Will post a link to an image of the psd of the site so you have an idea<br> what it is supposed to be like.<br>
  <img src="https://i.stack.imgur.com/6Z30K.png" alt="Link to screenshot of the site what it will look like">
  <br>
  <a href="http://www.fishbone-designs.be/school/stage/index.html" rel="nofollow noreferrer">Link to the site itself</a><br>
  the site has a width of 1200px as you scale the site you will see that the boat will do nothing
  <br><br>
  Now to the problem.</p>
  
  <p>the problem lays with the boat this img is 1019x1732 and is positioned absolute. And needs to be so because i have to use the z-index to be able to position it above some other divs for it is rather big.<br>
  I have tried to put it in as a background-image and as an img tag with a relative div around it. but nothing happens.<br><br>
  My appolagies if my question is a hard to understand. have a hard time explaining problems to other people, it always makes more sence in my head.<br>
  Here is my code:<br><br>
  my html</p>
  
  <pre><code>&lt;div id="wrapperHero"&gt;
  
          &lt;div id="hero"&gt;
  
              &lt;p&gt;The "Banarly Group" has been operating&lt;br&gt;
                  in Nigerian, Gabonese and Cameroon waters&lt;br&gt;
                  since 1995.
              &lt;/p&gt;
              &lt;div id="circle"&gt;
                  &lt;p&gt;a fleet of&lt;br&gt; 
                      &lt;span class="number"&gt;24&lt;/span&gt;&lt;span class="trawler"&gt;trawlers&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="boat"&gt;
              &lt;img src="img/BAN_herofg.png" alt="boat"&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>My css:</p>
  
  <pre><code>#wrapperHero {
  width: 100%;
  background-image: url(../img/BAN_herobg.png);
  background-repeat: repeat-x;
  min-height: 795px;
  margin-top: -23px;}
  
  #hero {
  max-width: 1200px;
  width: 100%;
  height: 100%;
  margin: 0 auto;}
  
  #boat {
  background-image: url(../img/BAN_herofg.png);
  background-repeat: no-repeat;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1;
  right: -6%;
  top: 240px;}
  
  #circle {
  border-radius: 50%;
  width: 18.3333%;
  min-height: 220px;
  background-color: #fff;
  background-color: rgba(255,255,255,0.2);
  float: right;
  margin: -230px 21.6666% 0 0;}
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/6Z30K.png" rel="nofollow noreferrer">1</a>: </p>