Ridimensionare una immagine con i css

**king7880** · 20-11-08, 14:12

Salve Ragazzi,
Ho un piccolo problemino, devo realizzare un sito in fullscreen con una immagine di sfondo

faccio un'esempio: http: //www[dot]ondademar[dot]com/

Il sito in questione è stato realizzato in flash ma io non voglio utilizzare questa tecnologia in quanto dovro applicare al suddetto un cms in php, pertanto qualcuno di voi mi saprebbe come realizzare questa cosa con i css e java???

Grazie a tutti in anticipo

**king7880** · 21-11-08, 09:56

Ragazzi nessuno mi sa dare una risposta??? almeno ditemi se si può fare... oppure mi devo rassegnare io non sono riuscito a trovare nulla che faccia al mio caso...

**karedas** · 21-11-08, 18:18

Ciao king 7880

Si, può essere fatto ma con una piccola problematica e cioè che la tua immagine dovrà avere una risoluzione molto alta per far si che al suo ridimensionamento non perda qualità.

Ciò va ad intaccare sulla pesantezza in kb del sito e quindi sul suo caricamento, indicizzazione da parte dei motori di ricerca, fruibilità. Immagini del genere, anche se compresse ed ottimizzate, raggiungono dimensioni troppo elevate. Poi andrebbe visto la struttura dell'immagine, quale cromia utilizzata e via dicendo.

Detto questo prologo, passiamo alla pratica.

Per far si che si abbia uno sfondo elastico dobbiamo quindi pensare alle varie risoluzioni che un monitor potrebbe avere (pensiamo anche al wide!).

La mia idea è quindi questa inserendo il tutto tra i tag <body></body>:

Codice HTML:

<body>
<img src="path/nomeimmagine.jpg" id="sfondo" />
<div id="contenuto">
.......
</div>
</body>

Nel nostro css, contando che nel div con id "contenuto" andremo appunto a mettere tutto ciò che starà sopra lo sfondo:

Codice:

#sfondo{
position:absolute; 
top:0; 
left:0;
z-index:2; 
width:100%
}
#contenuto{
position:absolute;
top:0;left:0;
z-index:10;
}

L'immagine, dandogli un valore di width pari a 100% si autoridimensionerà nello spazio (per vedere l'effetto basta ridimensionare la pagina creata anche tramite le famose freccine di ridimensionamento a bordo browser).

Perchè lo z-index e la posizione assoluta?

Se avessimo impostato uno sfondo tramite il parametro "background" da css allora il nostro gioco non avrebbe mai funzionato poichè non è possibile dare una dimensione personalizzata alle immagini di sfondo se non una ripetitività. Ciò vuol dire che avrebbe mantenuto le dimensioni originali quindi non coprendo l'intera area del body.

Simuliamo quindi uno sfondo impostando un'immagine (inserita tramite tag "<img ... />") e gli diamo un valore numerico z-index. Attribuiamo inoltre una posizione assoluta per far si che lo z-index possa essere applicato.

Dando un valore z-index="1" alla nostra immagine e al div del contenuto un numero superiore faremo in modo che quest'ultimo si posizionerà al di sopra dello sfondo.

Spero di essermi spiegato in ogni caso lo z-index funziona proprio come i livelli di photoshop.

Per quanto riguarda l'esempio io l'ho testato su firefox e su IE ma non ne assicuro l'integrità e funzionalità totale

Ciao!

Ridimensionare una immagine con i css

LinkBack

Strumenti Discussione

Ridimensionare una immagine con i css

Tag per Questa Discussione

Permessi di Scrittura