title: I can't center a div over the image
body: <p><a href="http://i.stack.imgur.com/a1zaK.png" rel="nofollow">enter image description here</a>i am trying to center the div over the image , i tried positioning the container relative and the elements to absolute but didn't work.The code below shows what i have done till now.The image is a full size background and the container should be centered over it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.circle123{
      position: relative;
      float: none;
      width: 600px;
      height: 200px;
      top: 0;
      margin-right:auto;
      margin-left:auto;
      text-align: center;
      border: 1px solid black;
  
  }
  #circle1{
      position: absolute;
      display: inline-block;
      height: 150px;
      width: 150px;
      margin: 10px;
      padding: auto;
      border-radius: 50%;
      background-color: rgba(50,205,50, 0.75);
  }
  #circle2{
      position: absolute;
      display: inline-block;
      height: 150px;
      width: 150px;
      margin: 10px;
      padding: auto;
      border-radius: 50%;
      background-color:rgba(135,206,235, 0.75);
  }
  #circle3{
      position:absolute ;
      display: inline-block;
      height: 150px;
      width: 150px;
      margin: 10px;
      padding: auto;
      border-radius: 50%;
      background-color: rgba(220,20,60, 0.55);
  }
  .back-bar{
      display: inline-block;
      width: 100%;
      height: 100%;
      background: url(image.jpg);
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;       
      background-position: center center;   
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="back-bar"&gt;&lt;/div&gt;
  &lt;div class="circle123"&gt;
  &lt;div id="circle1"&gt;&lt;h2&gt;1&lt;h2&gt;&lt;/div&gt;
  &lt;div id="circle2"&gt;&lt;h2&gt;2&lt;h2&gt;&lt;/div&gt;
  &lt;div id="circle3"&gt;&lt;h2&gt;3&lt;h2&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>