title: How to center an image and make it responsive and resizable as screen change?
body: <p>I'm new to responsive design and CSS. It seems like a simple question but I can't get a straight answer from Google. I have tried <a href="http://css-tricks.com/centering-in-the-unknown/" rel="nofollow">http://css-tricks.com/centering-in-the-unknown/</a> The ghost block works perfectly but it leaves me a white background colour. Now I'm stuck. Basically, I have a logo size 534x385 and I want this logo to be centered on any devices. In the case of mobile phones I would like this logo to shrink to match the screen size as well. </p>
  
  <pre><code>&lt;div&gt;
      &lt;img class="logo" src="images/shapes-logo.png" /&gt;
  &lt;/div&gt;
  
  .logo {
      position: fixed;
      top:15%;
      left: 50%;
      margin-left: -267px;
  } 
  
  html {
      background: url('../images/shapes-background.jpg') no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  </code></pre>
  
  <p>Here's my CSS so far. But if I do this the margin-left: -267px will cause problems in mobile devices. </p>