Sfondo adattabile ad ogni risoluzione

[ANTAGONIA]

Buon giorno, vorrei sapere come posso ovviare al problema di un'immagine come sfondo che si possa adattare a qualsiasi risoluzione video.
Capisco che, solo adottando un colore monocromatico, si riesca ad ovviare ma, se voglio che il mio sito abbia un effetto ombra ai suoi lati, dovrò, adottare la soluzione di un'immagine 1440x900 (in verità 1440x1 etc etc), 1280x768, 800x600 e via discorrendo.

Però, dovrei, tramite un controllo in javascript, intercettare la risoluzione e prendere l'immagine relativa.

Ma, so anche che, con Firefox, il suddetto controllo, viene ignorato..
Allora domando, come posso fare, per ottenere l'ombra ai lati del sito?

Grazie mille...

[NuxiL]

Se ho capito bene il tuo problema puoi risolverlo dividendo il div contenitore anzichè in 3 parti come si fa di solito (ad esempio top, center con repeat-y e bottom) in 9, ad esempio top-left, top-center, top-right, center-left, center-center, center-right, bottom-left, bottom-center, bottom-right.
Esempio:

<div class="contenitore">
<div class="top">
<div class="tl"></div><div class="tc"></div><div class="tr"></div>
</div>
<div class="center">
<div class="cl"></div><div class="cc"></div><div class="cr"></div>
</div>
<div class="bottom">
<div class="bl"></div><div class="bc"></div><div class="br"></div>
</div>
</div> 

Lo schema è pressapoco questo: è (qui ho dato un po' di padding per farti vedere meglio, mettendo il padding a 0 i 9 quadratini si visualizzano attaccati)
Poi dal css: dai a . top, .center, .bottom altezza uguale a quella dei vari tl, tc, tr ecc, e a questi dai un float: left
Dopodichè crei le immagini dei quattro angoli (top-left, top-right, bottom-left, bottom-right) con misura fissa. Devono essere solo gli "spigoli", perciò potrebbe bastare ad esempio 20 x 20px.
Dopodichè metti top-center (tc) con repeat-x, center-left (cl) con repat-y, center-center(cc) dovrebbe essere dove scrivi, perciò con sfondo bianco (o comunque se vuoi mettere un'immagine dai repeat normale), center-right (cr) con repeat-y, top-center (tc) con repeat-x.

Lo so. è una soluzione un po' astrusa, ma purtroppo quando il div non ha una larghezza fissa è difficile.. per questo moltissimi siti hanno una larghezza fissa, di solito sui 1100px; in modo che sia a 1280x1024 che a 1024x860 il sito si veda interamente (vedi phpbb.it, phpbb.com, lo stesso html.it ha un div container di circa 100opx )

Spero tu abbia capito..

[ANTAGONIA]

ti ringrazio, ti faccio vedere un sito che sto facendo www.asbam.altervista.org !

Con qualsiasi risoluzione si vede bene nessun problema, ma, vorrei dare un tocco diciamo cosi, "d'artista" :master: (che parolone...), inserendo l'ombra ai due lati del sito stesso...
Ma, se faccio come ti ho detto, nel post precedente, non è la soluzione ottimale.

Quindi, cosi come mi hai detto tu dovrei risolvere quel problema?

Grazie ancora.....

[ANTAGONIA]

ho risolto in questa maniera..i più sostenevano che, FF,OPERA non supportavano, il javascript per l'intercettazione della risoluzione video, ma io ho appena constatato che non è cosi.
Con lo script che posto di seguito, basta che creo tutte le immagini che, ritengo utili per le risoluzioni e il gioco è fatto...

<script>
	if(t_pixel=="1024 x 768"){
		document.write("<style>body{font-family : arial,sans-serif;font-size : 12px;text-align : center;background-image:url(img/sf_.gif);}</style>");
		//document.write(t_pixel);
	}
	else if(t_pixel=="1440 x 900"){
		document.write("<style>body{font-family : arial,sans-serif;font-size : 12px;text-align : center;background-image:url(img/SF_1440X900.gif);}</style>");
		//document.write(t_pixel);
	}
	else {
		document.write("<style>body{font-family : arial,sans-serif;font-size : 12px;text-align : center;background-image:url(img/SF_1280X1024.gif);}</style>");
		//document.write(t_pixel);
	}
</script>

Per il momento và benissimo cosi...
Ti ringrazio per avermi aiutato in quel senso, sicuramente i prossimi siti li farò con la tecnica che utilizzi tu..
Ciao ciao e buona gironata...

[Mich_]

Cosi` pero` ti giochi la visualizzazione in TUTTI i browser che non supportano JS (son pochi ma non nulli).

Vedi invece questa soluzione:

<style type="text/css">
body{
  font-family : arial,sans-serif;
  font-size : 12px;
  text-align : center;
  background-image:url(img/SF_1440X900.gif);  /* valore medio default */
}
</style>
<script type="text/javascript">
  if (t_pixel == "1024 x 768"){
    document.write("<style type='text/css'>body{background-image:url(img/sf_.gif);}</style>");
  } else if (t_pixel != "1440 x 900") {
    document.write("<style type='text/css'>body{background-image:url(img/SF_1280X1024);}</style>");
}
</style>

[NuxiL]

Originariamente inviato da ANTAGONIA
ti ringrazio, ti faccio vedere un sito che sto facendo www.asbam.altervista.org !

Con qualsiasi risoluzione si vede bene nessun problema, ma, vorrei dare un tocco diciamo cosi, "d'artista" :master: (che parolone...), inserendo l'ombra ai due lati del sito stesso...
Ma, se faccio come ti ho detto, nel post precedente, non è la soluzione ottimale.

Quindi, cosi come mi hai detto tu dovrei risolvere quel problema?

Grazie ancora.....

Sì, come ti ho detto io, se fai le immagini ad ok, funziona usando solo CSS e XHTML.. certo poi con javascript è molto più semplice!