Discussion :

[elsicilianos]

Salut à tous,

je voudrais resizer l'image d'un background
c'est à dire je crée un objet image que je resize via une petite function
et ensuite je voudrais l'affecter en tant que background d'une DIV

si qq'un a une idée ca me sauverait le je seche

//Code

Code :

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

1
2
3
4
5
6
7
8
9
var img = new Image();
 
img.src = url;
 
img.width = widthResize;
img.height = heightResize;
 
var backgroundImg = document.getElementById(idContainer).style.backgroundImage;
backgroundImg = img;

en gros c l'idee mais ca marche pas du tout
var img est un objet de nature [html objectImageElement] et document.getElementById(idContainer).style.backgroundImage renvoie aussi [html objectImageElement]

je ne comprends pas ???

merci pour votre aide !

[marcha]

Salut,

A ma connaissance, la taille d'une image de fond ne peut pas être spécifiée.

Je vois deux moyens de contourner le problème.

1) Tu resize l'image coté serveur puis tu applique le style background-image avec
l'url de l'image resizée.

2) Tu utilise effectivement une balise img qui redimensionne l'image et tu pose ton
contenu par dessus dans un div positionné en absolu sur l'image.

[Bisûnûrs]

En CSS, c'est

Code css :

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

background-image:url(adressedetonimage);

Donc en Javascript c'est

Code :

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

backgroundImage = "url(adressedetonimage)";

Or, toi tu as

Code :

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

backgroundImage = "objetImage";

Code :

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

backgroundImage = "url("+img.src+")";

[elsicilianos]

merci de ta reponse,

ca marche bien, j'avais fait une erreur ds mon post, il était temps que j'aille dormir

mon probleme en fait etait de redimensionner l'image de background sans que la div ne change de taille, du coup dans le DIV j'aurai mis un gif transparent pour qu'on ne puisse pas récuperer les images.

je voulais pouvoir la redimensionner en la croppant, et la recentrer ensuite avec les styles, du coup j'ai fait avec une image ds un DIV avec overflow et c'est beaucoup plus facile

[Prue]

J'ai le même problème que elsicilianos mais je n'arrive pas à le corriger même avec vos directives

Voici mon code

Code :

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

1
2
3
4
5
6
7
8
9
10
var img = new Image();
var imgWidth = 209;
var imgHeight = 91;
 
img.src = 'http://localhost:8080/frontoffice/monImage';
 
img.width = imgWidth;
img.height = imgHeight;
 
document.getElementById('divLogo').style.backgroundImage = "url("+img.src+")";

src, width et height sont correctement renseignés, mon image s'affiche bien dans mon background, mais au final, elle n'est pas redimensionnée.

Quelqu'un a une idée de la raison pour laquelle ça ne marche pas ?

Merci d'avance ^^