html - 响应式设计中的绝对定位图像

Question

我需要一些帮助。

我目前正在开发一个响应式网站。
将发布指向网站 psd 图像的链接，以便您了解
它应该是什么样的。

Link to the site itself
该网站的宽度为 1200 像素，当您缩放该网站时，您会看到船什么都不做

现在解决问题。

问题出在船上，这个 img 是 1019x1732 并且是绝对定位的。并且需要如此，因为我必须使用 z-index 才能将它定位在其他一些 div 之上，因为它相当大。
我试图将它作为背景图像和周围带有相对 div 的 img 标签放入。但什么也没发生。

如果我的问题很难理解，我表示感谢。很难向其他人解释问题，它总是在我的脑海中更有意义。
这是我的代码:

我的 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>

我的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

你可以在不同的媒体上使用 background-size , background-position-x :)

 #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;}
}