Adattare al contenitore DIV una background-image

[mikeRam]

Ciao a tutti,

vorrei sottoporvi questa porzione di codice:
#content{
background-image: url(Span1.jpg);
background-repeat: no-repeat; //per non ripetere l'immagine


}

dove content è:

<div id="content" >........</div>


Esiste per caso un modo per poter adattare/stretchare l'immagine alla grandezza del div, qualsiasi siano le sue effettive dimensioni? Eventualmente potrei farlo tramite Javascript?

Grazie



Mike "The Ram"

[Ht28]

Originariamente inviato da mikeRam
Ciao a tutti,

vorrei sottoporvi questa porzione di codice:
#content{
background-image: url(Span1.jpg);
background-repeat: no-repeat; //per non ripetere l'immagine


}

dove content è:

<div id="content" >........</div>


Esiste per caso un modo per poter adattare/stretchare l'immagine alla grandezza del div, qualsiasi siano le sue effettive dimensioni? Eventualmente potrei farlo tramite Javascript?

Grazie



Mike "The Ram"

Mettici le misure, es:

background-image:url(Span1.jpg);
width:780px;
height:181px;

[mikeRam]

ok, cosi' adatto il div alle dimensioni dell'immagine. Io vorrei il viceversa in quanto devo tenere fissate le dimensioni width e height del mio div.

Il problema è: data una immagine di dimensioni x e y, posso fare diventare x= div width e y=div height?

[Ht28]

Originariamente inviato da mikeRam
ok, cosi' adatto il div alle dimensioni dell'immagine. Io vorrei il viceversa in quanto devo tenere fissate le dimensioni width e height del mio div.

Il problema è: data una immagine di dimensioni x e y, posso fare diventare x= div width e y=div height?

Il codice che ti ho postato sono le dimensioni per l'immagine, se vuoi un div di una certa dimensione lo devi prima creare e poi metterci dentro il mio codice e ovviamente adattandoci le dimensioni...fai qualche prova.

[Mich_]

Originariamente inviato da Ht28
Il codice che ti ho postato sono le dimensioni per l'immagine, se vuoi un div di una certa dimensione lo devi prima creare e poi metterci dentro il mio codice e ovviamente adattandoci le dimensioni...fai qualche prova.

Ma che sti dicendo?
Le imamgini di sofondo non si possono adattare alle dimensioni del blocco. Non con metodi CSS.
Potrebbe essere una cosa che verra` introdotta in futuro (i guru ne hanno parlato), ma al momento sono solo ipotesi.

Per risolvere il problema di mike in alcuni casi si possono usare dei trucchi grafici (riempire lo spazio in eccesso con un colore uguale a quello di sfondo, sovrapporre due immagini (in due blocchi diversi), centrare l'immagine opportunamente, ...)
oppure si usano metodi di sostituzione dell'immagine tramite programmazione, che puo` essere sia lato server (PHP, ASP, JSP, ...), che lato client (JS)

[Ht28]

Originariamente inviato da Mich_
Ma che sti dicendo?
Le imamgini di sofondo non si possono adattare alle dimensioni del blocco. Non con metodi CSS.
Potrebbe essere una cosa che verra` introdotta in futuro (i guru ne hanno parlato), ma al momento sono solo ipotesi.

Per risolvere il problema di mike in alcuni casi si possono usare dei trucchi grafici (riempire lo spazio in eccesso con un colore uguale a quello di sfondo, sovrapporre due immagini (in due blocchi diversi), centrare l'immagine opportunamente, ...)
oppure si usano metodi di sostituzione dell'immagine tramite programmazione, che puo` essere sia lato server (PHP, ASP, JSP, ...), che lato client (JS)

Io l'ho fatto, l'ho richiamato nel div nella home, vedi la parte sopra azzurra http://www.photoman.altervista.org/

#header {
background-image:url(immagine.gif);
width:780px;
height:181px;

e tieni presente che l'immagine originale è 800x181

[Mich_]

Originariamente inviato da Ht28
Io l'ho fatto, l'ho richiamato nel div nella home, vedi la parte sopra azzurra http://www.photoman.altervista.org/

#header {
background-image:url(immagine.gif);
width:780px;
height:181px;

e tieni presente che l'immagine originale è 800x181

In quella pagina hai un'immagine un pelo piu` larga del contenitore, che viene tagliata sui bordi.
Si puo` scegliere se il taglio farlo tutto dalla stessa parte, o meta` per parte (si usa l'attributo background-position), ma non si puo` ADATTARE l'immagine al blocco.
Per controprova usa una immagine un po' piu` piccola e non ripetuta (background-repeat: no-repeat: vedrai che resta un margine vuoto (che puoi settare al colore che vuoi con il background-color)

[Ht28]

Originariamente inviato da Mich_
In quella pagina hai un'immagine un pelo piu` larga del contenitore, che viene tagliata sui bordi.
Si puo` scegliere se il taglio farlo tutto dalla stessa parte, o meta` per parte (si usa l'attributo background-position), ma non si puo` ADATTARE l'immagine al blocco.
Per controprova usa una immagine un po' piu` piccola e non ripetuta (background-repeat: no-repeat: vedrai che resta un margine vuoto (che puoi settare al colore che vuoi con il background-color)

L'mmagine si può creare un po più grossa e "restringerla" nel div

[mosquito70]

Originariamente inviato da Ht28
L'mmagine si può creare un po più grossa e "restringerla" nel div

Ma questo non vuol dire adattarla

[mikeRam]

esatto hanno detto bene Mosquito70 e Mich_

L' immagine dovrebbe "prendere la forma" del suo contenitore: non dovrei essere io a cambiarlo utilizzando programmi di grafica!

Il concetto che volevo esprimere è quello di stretch image, presente in C# ( sviluppo GUI per una windows application, inserendo un'immagine è possibile ridimensionarla in quel contesto), non so se ho reso l'idea...