позиция подсказки по редактируемому изображению

Question

Во-первых, я не являюсь экспертом в кодировании html/ccs. Я хочу использовать фрагмент кода (см. Ниже) http://codepen.io/ianfarb/pen/qkpJH НО В этом примере изображение и положение всплывающих подсказок фиксированы. В моем случае я хочу, чтобы изображение изменялось при изменении размера браузера. Кроме того, всплывающая подсказка должна оставаться в правильном положении. Какие-либо предложения?

@import url(http://fonts.googleapis.com/css?family=Roboto:100,400); 
 

 
* { margin:0; padding:0;} 
 

 
body  { background:url(http://img.tapatalk.com/d/12/10/31/6yby7usy.jpg) center center; 
 
      } 
 

 
#container { background:url(https://lh3.ggpht.com/PQXITv6h0hTZLqlvlni7RSN2rE70QytYeNAtngBc3wKQuq8g5gH28EUDqYKgCPkWfQ=h900-rw) no-repeat; 
 
     background-size:500px 293px; 
 
     width:500px; 
 
     height:293px; 
 
     margin:25px auto;} 
 

 
.tooltip { width:16px; 
 
       height:16px; 
 
       border-radius:10px; 
 
       border:2px solid #fff; 
 
       position:absolute; 
 
       background:rgba(255,255,255,.5);} 
 
    
 

 
.tooltip:hover 
 
      { -webkit-animation-play-state: paused;} 
 

 
.tooltip:hover .info {visibility:visible;} 
 
    
 
#first { margin: 200px 0 0 200px !important;} 
 

 
#second { margin:75px 0 0 52px !important;} 
 

 
#third { margin:158px 0 0 425px !important;} 
 
       
 
.info  { width:200px; 
 
       padding:10px; 
 
       background:rgba(255,255,255,1); 
 
       border-radius:3px; 
 
       position:absolute; 
 
       visibility:hidden; 
 
       margin:-105px 0 0 -100px; 
 
       box-shadow:0 0 50px 0 rgba(0,0,0,.5);} 
 

 
h3   { font-family: 'Roboto', sans-serif; 
 
       font-weight:100; 
 
       font-size:20px; 
 
       margin:0 0 5px 0;} 
 

 
p   { font-family: 'Roboto', sans-serif; 
 
       font-weight:400; 
 
    font-size:12px;} 
 

 
.arrow { 
 
    position:absolute; 
 
    margin:10px 0 0 88px; 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-left: 10px solid transparent; 
 
\t border-right: 10px solid transparent; 
 
\t border-top: 10px solid #fff; 
 
}

<div id="container"> 
 
    <div class="tooltip" id="first"> 
 
    <div class="info"> 
 
     <h3>Awesome Display</h3> 
 
     <p>The world's highest-resolution 7" tablet puts over 2.3 million pixels in the palm of your hand. </p> 
 
     <div class="arrow"></div> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="tooltip" id="second"> 
 
    <div class="info"> 
 
     <h3>Stay Connected</h3> 
 
     <p>Hangout and share your world with those that matter the most to you in glorious high definition. </p> 
 
     <div class="arrow"></div> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="tooltip" id="third"> 
 
    <div class="info"> 
 
     <h3>Powerful Portability</h3> 
 
     <p>Delivering the game and applications that help you have more fun and get more done. </p> 
 
     <div class="arrow"></div> 
 
    </div> 
 
    </div> 
 
    
 
</div>

Answer 1

Для этого вам нужно будет изменить несколько вещей (см):

Несколько изменений в фоновое изображение, чтобы сделать его отзывчивым:

#container { 
    background: url(https://lh3.ggpht.com/PQXITv6h0hTZLqlvlni7RSN2rE70QytYeNAtngBc3wKQuq8g5gH28EUDqYKgCPkWfQ=h900-rw) no-repeat; 
    background-repeat: no-repeat; 
    background-size: contain; 
    background-position: center; 
    height: 400px; 
    margin: 25px auto; 
    width: 600px; 
    position: relative; 
    max-width: 100%; 
} 

Укажите местонахождение для каждого места:

#first { 
    left: 5%; 
    top: 95px; 
} 

#second { 
    left: 40%; 
    top: 235px; 
} 

#third { 
    left: 90%; 
    top: 135px; 
}