Div that stays centered on window resize and overflows to both the left and right

Question

I'm essentially trying to create this effect: https://squareup.com/

but I cannot figure out how to get my div to overflow to the left while it stays centered on the page when the window is resized.

Answer 1

Here's a Fiddle

HTML

<div class="content">

  <div class="wrapper">

    <h1>CONTENT</h1>

  </div>

</div>

CSS

.content {
  background: url(../bg-image.png) center no-repeat;
  width: 100%;
  height: 400px;
}
.wrapper {
  width: 980px;
  height: 400px;
  margin: 0 auto;
}