immagine di sfondo del div

emanuelevt

Utente Attivo
24 Giu 2009
298
0
0
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%" />?

:confused:

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...
 
Ultima modifica:

MarcoGrazia

Utente Attivo
15 Dic 2009
820
18
18
60
Udine
www.stilisticamente.com
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

Utente Attivo
9 Gen 2010
43
0
0
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

Utente Attivo
24 Giu 2009
298
0
0
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:

Codice:
#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:
 

emanuelevt

Utente Attivo
24 Giu 2009
298
0
0
Forse è meglio che lasci la gif poiché l'img effettivamente ha un basso range di colori
 
Discussioni simili
Autore Titolo Forum Risposte Data
P Immagine sullo sfondo dietro il centro del sito HTML e CSS 4
R Non riesco a rinnovare l'immagine di sfondo PHP 1
R Non riesco a cambiare l'immagine di sfondo PHP 4
G Modifica immagine di sfondo attraverso un bottone PHP 18
L [HTML] problema sfondo tutto schermo con immagine HTML e CSS 1
felino [Wordpress] Immagine di sfondo (sotto il template) WordPress 8
A [Javascript] Impostare immagine sfondo da checkbox, sito web Javascript 1
V javascript - cambiare immagine di sfondo di un div Javascript 3
R [Flash] Animare un testo con un' immagine sullo sfondo Windows e Software 7
Papalla CSS3 - immagine di sfondo con elementi che appaiono col mouse hover HTML e CSS 4
Fuego2806 Stampare dati Form su immagine di sfondo con html HTML e CSS 1
Fuego2806 [PHP] Stampare dati Form su immagine di sfondo con html PHP 70
Gregia Immagine con testo affianco (sfondo colore diverso) HTML e CSS 8
Zea problemi duplicazione immagine di sfondo HTML e CSS 3
M problema immagine di sfondo e risoluzione schermo HTML e CSS 1
R Sostiture il colore di sfondo di un'immagine con canvas e drawImage... dove sbaglio? Javascript 1
P link su immagine di sfondo HTML e CSS 1
L fpdf .. immagine di sfondo e posizionamento testo PHP 1
G Inserire un immagine di sfondo con un disegno base Photoshop 1
L Bottone con immagine di sfondo HTML e CSS 2
P Immagine Sfondo body non completa HTML e CSS 6
F Immagine che si autoingrandisce dallo sfondo Flash 2
voldemort Immagine di sfondo fissa con CSS HTML e CSS 1
A immagine sfondo casuale Javascript 13
G Realizzare un'immagine con sfondo trasparente con Photoshop Photoshop 3
mkrapfen immagine sfondo sito a tutto schermo Javascript 2
L problemi con l'immagine di sfondo da ripetere Webdesign e Grafica 1
V Stampare dati Form su immagine di sfondo PHP 8
M [Firefox/CSS] Problema immagine di sfondo centrata HTML e CSS 1
Angel0 Rotazione immagine di sfondo con css HTML e CSS 3
A script apertura immagine su sfondo nero Webdesign e Grafica 1
T Immagine di sfondo menu applet Javascript 10
Ailinen Immagine sfondo sito Webdesign e Grafica 15
C creare sfocatura su una porzione dell'immagine di sfondo Flash 0
B Adattare tabella a immagine di sfondo con Dreamweaver Cs3 Webdesign e Grafica 3
I Immagine di sfondo tabella - NVU Webdesign e Grafica 9
S Immagine sfondo Flash 3
C Immagine di sfondo, ad un bordo. HTML e CSS 0
N Non riesco a centrare l'immagine di sfondo Webdesign e Grafica 9
H Immagine di sfondo a tabella: centrata e non affiancata Webdesign e Grafica 6
D Immagine di sfondo [era: help] HTML e CSS 11
I Immagine in sfondo di una classe che non compare. HTML e CSS 2
S fondere immagine con sfondo Webdesign e Grafica 3
J dreamweaver sfondo immagine Webdesign e Grafica 4
S Immagine di sfondo che cambia ad ogni accesso Javascript 2
J frontpage: mettere un'immagine di sfondo HTML e CSS 2
K Come posso usare un'immagine al posto di un bottone? HTML e CSS 2
M Upload immagine con javascript problemi con FormData() Javascript 1
M Visulizzare immagine con php PHP 8
Stex1967 Salvare una immagine che si trova su porta TCP 8080 di altro sito PHP 6

Discussioni simili