title: responsive design - image and text together
body: <p>I am designing a responsive website and i am stuck in making this part as responsive.</p>
  
  <p>attached is the image where red round is the image acting as buttons and field below that image is used as input text to enter the data. now how do i make this responsive, so that both image and text resize in proportion. 
  I tried ImageMaps plugin, but what i understood is that this plugin is good for image resizing, not for image and textfield as a whole.</p>
  
  <p>i also tried to place text over the image, but still the image gets responsive with ImageMaps but not not textfield.</p>
  
  <p><a href="http://i.stack.imgur.com/hPO0f.png" rel="nofollow">http://i.stack.imgur.com/hPO0f.png</a></p>
  
  <p>The codes Tried:</p>
  
  <pre><code>&lt;img id="img-htp" class="img-center img-responsive img-margin" width="2419" height="897" src="{res}images/home1.jpg" usemap="#image-maps" alt="Home Figure"&gt;
      &lt;map name="image-maps" id="image-maps"&gt;
          &lt;area  alt="language" title="Language" href="http://www.google.ca" shape="rect" coords="0,317,267,587" style="outline:none;" target="_self"/&gt;
          &lt;area  alt="sign me in" title="Sign me in" href="login" shape="rect" coords="555,314,821,584" style="outline:none;" target="_self"/&gt;
          &lt;area  alt="create future account" title="Create future account" href="login/registeration" shape="rect" coords="2161,319,2419,586" style="outline:none;" target="_self"/&gt;
      &lt;/map&gt;
  </code></pre>
  
  <p>Script Used:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(e) {
      $('img[usemap]').rwdImageMaps();
  });
  </code></pre>
  
  <p></p>