Absolute positioned image in responsive design - html

Question

I am in need of some assistance.
I am currently working on a site that is going to be responsive.
Will post a link to an image of the psd of the site so you have an idea what it is supposed to be like.
Link to the site itself
the site has a width of 1200px as you scale the site you will see that the boat will do nothing
Now to the problem.
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.
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.
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.
Here is my code:
my html
<div id="wrapperHero">
<div id="hero">
<p>The "Banarly Group" has been operating<br>
in Nigerian, Gabonese and Cameroon waters<br>
since 1995.
</p>
<div id="circle">
<p>a fleet of<br>
<span class="number">24</span><span class="trawler">trawlers</p>
</div>
</div>
<div id="boat">
<img src="img/BAN_herofg.png" alt="boat">
</div>
</div>
My css:
#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;}
1:

Answer 1

You can use background-size , background-position-x with different media :)
#boat {
background-size: 590px;
background-position-x: 79px;
}
#media (min-width: 450px) and (max-width: 960px) {
#boat {background-size: //use different size;
background-position-x://use different size;}
}

Answer 2

If I got the question right, here's what you should do:
remove the background-image property from #boat
create <img src="img/BAN_herofg"> inside
set max-width: 100% to <img>.
Hope this will solve your problem.

Answer 3

Use css media queries to solve your problem...
ex:
#media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}