ridimensionare immagine di background

[polps]

Salve a tutti, ho il seguente quesito.

Ho un div che ha come background una immagine
<div id="div_contenitore" style="width:100px; height:100px; background: url(prova.jpg); overflow: hidden; "></div>

L'immagine è più grande del div quindi se ne vede una sola parte.
Con dei pulsanti vorrei ridimensionare e spostare l'immagine (le dimensioni del div non devono cambiare) realizzando una sorta di "zoom".

Per spostare il background uso
divimg = document.getElementById("div_contenitore")
divimg.style.backgroundPosition = "+200px"

Quale attributo devo invece usare per ridimensionare il background?

Grazie

[Xinod]

non puoi, a meno di cambiare l' immagine in background con una piu' grande/piccola
o rinunciando ad usare l' immagine come background di un elemento, usandola invece come normale <img> di cui puoi ovviamente gestire width e height

ciao

[polps]

Grazie Xinod, un pò lo immaginavo ma volevo una conferma.
Spero di non abusare della tua gentilezza se ti chiedo qualche dettaglio ulteriore.

1)
Se ricarico l'immagine di background non posso comunque gestire gli attributi height e width?
Lo chiedo perchè da qualche parte avevo visto una sintassi simile a questa divimg.style.backgroundImage = "url('prova2.JPG'&width=100&height=100)"
però non mi funziona

2)
Se creo un nuovo oggetto immagine, ne gestisco gli attributi height e width e ricarico il background?
NewBackground = new Image();
NewBackground.src=("prova.jpg");
NewBackground.style.height = 100
NewBackground.style.width = 100
divimg.style.backgroundImage = NewBackground
anche in questo modo però sembra non funzionare

3)
Se invece gestisco l'immagine con il tag <img>, come da te suggerito, riesco a gestire correttamente il ridimensionamento ma mi trovo in difficoltè per gestire lo spostamento.
Infatti, se l'immagine viene spostata dall'utente e viene posizionata con coordinate negative
la proprietà img.offsetLeft non risponde le effettive coordinate negative ma risponde 0; sto prendendo una cantonata?

Grazie ancora.

[Xinod]

1- sintassi fantasiosa, non esiste nulla del genere di nativo
si puo' ipotizzare di ridimensionare quell' immagine lato server
prova2.php?width=100&height=100 con php che si preoccupa di restituire un' immagine di quelle dimensioni
ma non sperare di farlo di continuo e in tempo reale

2- altra fantasia: quella e' l' immagine, modifichi width e height di una copia in possesso del client, se la ricarichi mantiene ovviamente le dimensioni originali

3- l' offsetLeft si', ma se per esempio fosse posizionata rispetto ad un contenitore potresti ottenerne questo left negativo

ora non ho tempo per scervellarmi in codice ipotetico,
lascia un link in modo che chiunque voglia aiutarti possa farlo

ciao

[polps]

Ok, grazie mille. Ora indago meglio la soluzione 3.

[xarium]

Fossi in te avrei tolto l'immagine dallo sfondo e l'avrei posizionata nel div contenitore come img con posizionamento assoluto, ponendo poi il contenuto in un'altro div contenitore posto sopra all'immagine... In questo modo puoi modificare tutti i parametri dell'immagine come vuoi... Ti scrivo i codici css, html e javascript d'esempio che si capisce meglio mi sa...

#div_contenitore {
	width:100px;
	height:100px;
	overflow:hidden;
	position:relative;
}
#sfondo {
	position:absolute;
	top:0px;
	left:0px;
}
#contenuto {
	z-index:2;
	background-color:transparent;
}

<div id="div_contenitore">
	[img]prova.jpg[/img]
	<div id="contenuto"></div>
</div>

divimg = document.getElementById("sfondo");
divimg.style.top = "200px";
divimg.style.left = "200px";
divimg.style.width = "200px";
divimg.style.height = "200px";

[polps]

Ho provato la soluzione che mi avete proposto, direi che funziona!
L'unico "inestetismo" è che l'immagine che uso come sfondo è molto più grande del div che la contiene (infatti abbiamo utilizzato l'attributo "overflow:hidden") con il piccolo inconveniente che quando clicco a fianco del div (in un area dove non ci sono elementi) l'immagine viene comunque selezionata - ciò non succede se clicco sopra o sotto il div. Comunque questo è un problema di poco conto.

Grazie ancora.