immagine di sfondo del div

[emanuelevt]

Ho un problema: nel sito che sto costruendo ho un'img di sfondo a un div che compare in alto ben visibile; poiché il sito è in percentuale; tramite .js farò in modo che il contenitore cambi in relazione allo schermo del client/utente.

il problema è che vorrei che si espandi l'immagine sullo sfondo del div-- cioè se il div invece di 1000px diventa largo 1400px vorrei che l'immagine si allargasse coprendo la larghezza totale del div; quindi senza usare background-repeat:repeat;

esiste un modo o devo farlo solamente tramite <img width="100%" />?



oppure pensavop anche in .js

if(screen.width>1300&&<1400){//usa questa immagine;}else if(screen.width>1200&&<1300){//usa quest'altra img come sfondo...}

però mi sembra usare troppe risorse e neanche un buon modo di fare...

 

[MarcoGrazia]

Dunque!
Usando un elemento IMG è più facile far sì che l'immagine si espanda dandogli le dimensioni in percentuali [1], mettendola come sfondo di un elemento è un altro paio di maniche.
Intanto devi tenere presente che le immagini non rendono bene se ingrandite, quindi se questa ha bassa risoluzione te lo sconsiglio per evitare di arrivare ad una massa informe e quindi a qualche cosa che si vede male e che banalmente ridicolizzi tutto il layout.
Se l'immagine copre l'intera pagina come credo di aver capito è già un'immagine che come minimo pesa 60/70Kb quindi già al limite del peso per una singola immagine, oltre al fatto che 70Kb cominciano davvero ad essere tanti da scaricarsi, soprattutto se poi nella pagina ci sono altre immagini.
Se devi aumentare la risoluzione per enfatizzare la possibilità di ridimensionarla allora è anche peggio dato che sarebbe persino più pesante.
Solitamente quando ci sono problemi come il tuo da risolvere non si fa ridimensionare l'immagine attraverso il posizionamento in percentuali, ma semplicemente mettendo un immagine più grande del dovuto, in pratica se la finestra è più piccola dell'intera immagine, tu ne vedi una parte, ma comunque non è sgranata e quindi è pur sempre una bella immagine e non un guazzabuglio di pixel.
Quindi o fai come si fa di solito per gli header, ovvero si mette come sfondo un'immagine molto più grande del necessario, posizionandola però centrata, è il caso delle immagini che formano gli header di tanti siti, specie blog.
Oppure che la metti in un IMG ma poi questo devi posizionarlo in sottofondo e posizionando il resto del sito in un contenitore centrato attraverso un posizionamento assoluto sopra l'immagine.
Il Javascript lo eviterei del tutto.



[1]: http://www.constile.org/tips/immagini_proporzionali/index.html

 

[indalo]

Problema simile.

Io ho un problema simile solo che nn è un'immagine di sfondo ma le immagini dei prodotti. Nn posso inserirla più grande perchè qualcuno la vedrebbe tronca. E allora ?

E' possibile nei css leggere alcune righe e non altre ?

Oppure in head leggere il foglio css esterno giusto in base alla risoluzione ?

 

[emanuelevt]

allora ragazzi io ho fatto cos':

-Poiché il sito si ridimensiona in base alla risoluzione del monitor del client, ho un range di immagine max di 1400px; quindi come dice MarcoGrazia ho optato per mettere l'immagine alla massima risoluzione(quindi 1400px)...in modo che non si sgrana.

-L'img poiché ha un certo peso la faccio antecedentemente caricare tramite il seguente script nell'head:

<script>
tmp=new image;
tmp.src='image.gif';
</script>

il codice da me utilizzato:

#img{float:left; margin-bottom:5%; display:block;}
<img id='img' src='images/thumb2.gif' width='100%' align='center' />

Il problema infatti è che lìimmagine è pesantuccia quindi sto optando (però proprio per il mio caso) di dare il colore di sfondo del div(bianco) e far caricare solo la parte di immagine che mi serve...in questo modo ridurrei drasticamente il peso... .

:book:

 

[MarcoGrazia]

Evita di usare una gif se così grande, le gif non sono molto ottimizzabili sul peso a meno di non ridurre il numero di colori, prova a trasformarla in jpg.

 

[emanuelevt]

Forse è meglio che lasci la gif poiché l'img effettivamente ha un basso range di colori