Discussion :

[JPBruneau]

Bonjour,
Je ne sais pas exactement comment positionner un background dans un div fixe
En effet j'ai un DIV qui est assez petit pour le laisser de taille fixe, 300X300 px
Mais en background j'ais une image de 2024x2024 pixels et la parie que je souhaite montrer est en coordonnée 450px du bord gauche de l'image et 25px du haut
je n'arives pas à comprendre quel valeur je dois donner a:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
background:url(http://monsite.fr/application/images/slideshow/1.jpg) no-repeat  -50px -40px;}

vous voyez que j'ais testé avec des valeurs négatives mais je ne vois pas quel calcul je dois faire ??
Merci d'avance.

[Invité]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background-size:cover;

...Mais en background j'ai une image de 2024x2024 pixels...

Il faut optimiser/adapter la taille "réelle" de l'image à la taille "affichée".
Ceci afin d'optimiser le temps d'affichage.

[Dave Hiock]

Il te faut jouer sur la background-position mais en opérant le décalage de ton image par rapport à ses origines.

Si tu veux faire apparaître en haut à gauche ce qui se trouve en x=450px et y=25px sur ton image, il te faut écrire background-position: -450px -25px, c'est le principe des sprites.

[JPBruneau]

Merci vous deux,
en fait jreaux62 je comprends ta réaction mais c'est pour une loupe je posterais mon codepen ici si je réussit ....

[JPBruneau]

C'est presque résolu, en effet je sais changer l'image en javascript, grâce à vous

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('divloupe').style.backgroundImage = 'url('+elem.src+')';

j'ai trouvé comment modifier cette position que tu m'a appris à calculer qui est dans mon CSS

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
div#divloupe{
background:url(http://www.fox-infographie.com/albums/paris-trocadero/paris_trocadero_2010_042.jpg) no-repeat  -450px -400px;
}

Donc en javascript

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('divloupe').style.backgroundPosition = ' '+lex+'px '+ley+'px';

Pour le moment j'en suis là
https://codepen.io/jplyne/pen/mdJmMXW

Merci encore !

[Invité]

Bonjour,

Désolé, j'avais (très) mal lu l'énoncé...