Image positionnée de façon absolue dans un design réactif

Question

J'ai besoin d'aide.

Je travaille actuellement sur un site qui va être réactif.
Publiera un lien vers une image de la psd du site afin que vous ayez une idée
de ce à quoi il est censé ressembler.

Link to the site itself
le site a une largeur de 1200px comme vous l'échelle du site, vous verrez que le bateau ne fera rien

maintenant au problème. Le problème réside avec le bateau cette img est 1019x1732 et est positionné absolu. Et doit l'être parce que je dois utiliser l'index z pour pouvoir le positionner au-dessus d'autres divs car il est plutôt gros.
J'ai essayé de le mettre en arrière-plan et en tag img avec un div relatif. mais rien ne se passe.

Mes appolations si ma question est difficile à comprendre. J'ai du mal à expliquer les problèmes aux autres, ça fait toujours plus de sens dans ma tête.
Voici mon code:

mon 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> 

Mon 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

Vous pouvez utiliser background-size, background-position x avec différents médias :)

#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

Utiliser des requêtes médias CSS pour résoudre votre problème ...

ex:

@media (min-width: 600px) and (max-width: 800px) { 
    html { background: red; } 
    } 

Answer 3

Si je suis la bonne question, voici ce que vous devez faire: enlever la propriété background-image à partir de #boat créer <img src="img/BAN_herofg"> à l'intérieur définir max-width: 100% à <img>.

Espérons que cela va résoudre votre problème.