I need help with centering a background image within a content div that is inside a wrapper container. When the browser window is resized to less than 500px, the background image starts to cut off from the right side. How can I ensure the background image stays centered in such scenarios?
Here is the code I currently have: http://jsfiddle.net/kon0w3t3/1/
div.wrapper {
width: 100%
}
div.content {
background: url(http://24.media.tumblr.com/tumblr_lbi4ltLmYL1qb23z5o1_500.jpg)
no-repeat scroll center 0 transparent;
width: 500px;
height: 500px;
margin: 0 auto;
display: block;
}<div class="wrappper">
<div class="content"></div>
</div>