Image de fond fluide lors du redimensionnement du navigateur

Question

Je veux obtenir l'effet d'image de fond fluide que vous pouvez voir sur cette page Web : http://217.116.9.130/test2.html (extrait de zara.com)

Si vous redimensionnez votre navigateur vers la gauche, la femme dans l'image va vers la gauche avec votre redimensionnement. J'ai pris le code de zara.com mais je soupçonne que l'effet est fait par un langage que je ne connais pas.

Est-ce que quelqu'un sait et peut donner un indice (ou me donner un lien) sur la façon de le faire en utilisant jquery, css, ajax ou php ?

Merci beaucoup.

Answer 1

Vous cherchez probablement ceci : http://css-tricks.com/perfect-full-page-background-image/

Il est assez simple à mettre en œuvre et ne nécessite aucun commentaire supplémentaire.

Answer 2

Vous pouvez utiliser la propriété css3 cover. pour cela

.container{
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

pour vérifier ce lien http://css-tricks.com/perfect-full-page-background-image/

Answer 3

Faire un stylisme css

background-position: center center;

les autres options sont

center top
center bottom
left top

etc...

Answer 4

Il y a simplement une méthode onResize utilisée en Javascript de sorte que lorsque le navigateur change, cela modifie le CSS pour la position de l'image d'arrière-plan.

Donnez un identifiant à l'image : id="fullImage"

Ils utilisent ensuite javascript pour manipuler le left:; style css.

Lorsque vous redimensionnez left change de haut en bas.

Cela devrait le faire :

var el = document.getElementById(fullImage),
width = window.innerWidth,
imageWidth = \[width of image here\];
window.onresize = function() {
  el.style.left = imageWidth - width + "px";
}

Answer 5

Par exemple, si votre image d'arrière-plan est contenue dans votre balise body, le CSS doit contenir l'affectation de l'image d'arrière-plan, puis inclure :

top: 0;
bottom: 0;
left: 0;
right: 0;

De cette façon, lorsque la fenêtre est redimensionnée, l'arrière-plan change immédiatement avec elle. Même principe pour fournir une superposition pour un dialogue modal.