immagine in div che si adatta in base alla risoluzione

**eddydesigner** · 09-03-2010, 13:45

premetto che spero di non essere off-topic ma nell'indecisione se postare nel forum javascript o css ho scelto questo.. bene passo al dunque, nel mio layout in photoshop ho realizzato un sito con un "doppio" sfondo, sfondo header e sfondo footer. Ed al centro nero.

Sto cercando di inserire lo sfondo della parte alta in modo che si adatti soltanto orizzontalmente a tutte le risoluzioni. il codice che sto utilizzando è questo ed andrebbe bene se non per il fatto che visualizzando la pagina ad una risoluzione più alta, a destra ho dello spazio vuoto.

Vorrei quindi ottenere che questo spazio vuoto sia coperto dall'adattamento in base allo schermo del mio sfondo:

codice:

#sfondoheader{
	position:absolute;
	top:0;
	left:0;
	z-index:0;
	background:url(img/bg.jpg);
	width:100%;
	min-height:752px;
	}



<body>

	<div id="sfondoheader"></div>

</body>

sapete come posso fare ?
Grazie

**ultimateshadow** · 09-03-2010, 17:06

Te lo dico da ignorante: penso che lo stretch dell'immagine si possa fare ma secondo me è brutto... non ti conviene usare backgorund-repeat:repeat-x; nell'header e nel footer?

**eddydesigner** · 09-03-2010, 17:14

magari potessi.. purtroppo non è una texture ma proprio una foto.. ho visto che molti fanno un'immagine grande a1600px

e poi fanno così:

background:url("../images/ui/bg/home.jpg") no-repeat scroll center top black

però non mi sembra accettabile imho perchè chi ha una risoluzione a a1920 vede comunque dello spazio nero ai lati..

tipo ad esempio http://digiglass.biz/

**ultimateshadow** · 10-03-2010, 12:45

hehe si... non credo sia così raro come problema
io di solito se devo mettere un header di questo tipo metto un fade (in trasparenza o con un gradiente) ai lati in modo che si ricongiunga gradualmente alla tinta unita e poi metto lo sfondo del colore di cui ho fatto la sfumatura

non è bello come avere l'immagine piena però è una soluzione valida anche perché, molto skiettamente, nn puoi mettere un'immagine da 1920px all'heeader, un'immagine da 1920px al footer e poi magari tutte le altre immagini nella pagina effettiva perché poi diventa pesante da scaricare il sito se non hai una buona connessione xD

poi fai tu, puoi fare anche così e mettere un link per visualizzare il sito in un formato per connessioni lente e fregartene di tutto questo discorso xD

**eddydesigner** · 10-03-2010, 14:58

cmq sia alla fine un compromesso bisogna pur trovarlo..

ho messo una sfumatura ai lati della foto (1600px circa) e centrato il div contenitore cosicché solo chi ha una risoluzione più alta di 1200 vede la sfumatura che va a completarsi su sfondo nero..

in alternativa per rispondere al primo post se dovesse ri-capitare a qualcuno, per adattare alla pagina un'immagine dentro ad un div, avrei potuto inserire un'immagine direttamente nel div e nel tag img mettere come width 100%. Ma questa soluzione nn mi è piaciuta perchè deformava troppo la mia foto

per quanto riguarda la connessione chi ha una adsl non dovrebbe avere grossi problemi a scaricare una pagina che peserà alla fine meno di 300kb.. chi non ha l'adsl

imho apetta

**ultimateshadow** · 10-03-2010, 21:04

heheh mi verrebbe da fare un po di buona polemica ma lascio stare!

dai se non altro hai trovato una soluzione xD

Discussione: immagine in div che si adatta in base alla risoluzione

Strumenti discussione

Ricerca discussione

Visualizza

immagine in div che si adatta in base alla risoluzione

Permessi di invio