Conserver une image d'arrière-plan centrée même si la fenêtre est redimensionnée

Question

J'ai un conteneur div avec un autre div centré à l'intérieur avec une image d'arrière-plan.

Quand je redimensionnez la fenêtre du navigateur, je veux l'image de rester centrée, même lorsque la largeur de la fenêtre du navigateur est plus petite que la largeur de l'image.

Voici quelques code:

CSS:

.wrap { 
    width:100%; 
    height:357px; 
    background-color:red; 
    overflow:hidden; 
    text-align:center; 
} 
.image { 
    margin:0 auto; 
    background:url('http://4.bp.blogspot.com/-GKx0A_H8DGE/Tb9bTBCC5pI/AAAAAAAAANc/jvjcjvuNmGk/s1600/wide-angle-lens-3-1.jpg') no-repeat; 
    width:500px; 
    height:357px; 
} 

HTML:

<div class="wrap"> 
    <div class="image"></div> 
</div> 

Vous pouvez voir que lorsque le navigateur est redimensionnée, l'image cesse de se "centrage" après frappe le côté gauche de l'écran. Ce que j'aimerais, c'est voir encore le centre de l'image, avec le côté gauche se détacher et se déplacer essentiellement hors de l'écran vers la gauche. Est-ce possible avec juste CSS? Je serais également intéressé par une solution JS si ce n'est pas possible.

Answer 1

.wrap { 
    height: 357px; 
    background-color: red; 
    overflow: hidden; 
    position: relative; 
} 
.image { 
    position: absolute; 
    left: 50%; 
    margin-left: -250px; 
    background:url('/image.jpg') no-repeat; 
    width:500px; 
    height:357px; 
}