[Javascript+CSS] Immagine di sfondo ridimensionabile

[Rombo di Tuono]

Ho passato un divertente pomeriggio a risolvere, tentando in vari modi, il seguente problema:

Senza fare troppi fogli CSS, visto che non ho voglia di smazzarmeli poi tutti se faccio una modifica, come posso ottenere che l'immagine di sfondo di un sito abbia dimensioni diverse a seconda che l'utente abbia lo schermo impostato su 800x600, 1024x768 o 1280x960??

ecco alla fine come ho fatto:

1) Ho salvato l'immagine prescelta con 3 nomi diversi, ovviamente in 3 immagini diverse per dimensione. 800.jpg 1024.jpg e 1280.jpg

2) Ho eliminato dal foglio di stile css principale i riferimenti al tag body

3) Ho constatato che mettere un secondo foglio di stile solo con il tag body, ho fatto alcune prove, non funzionava, non su tutti e tre i browser (Internet Explorer + Mozilla Firefox + Opera)

4) Ho constatato invece che mettere un tag <style> nel head (dedicato al trattamento del tag body, ovviamente), invece, funzionava.

5) Ecco quindi la soluzione:
5a) un file javascript per la selezione della risoluzione video e conseguente scelta del tag <style> body da usare: "scelta_bg.js"

Codice: Seleziona tutto

if (screen.width > 1269)  {
  	document.write('<style type="text/css">body {font: normal 83% "tahoma", georgia, verdana, sans-serif; color: #688345; background: #90FFFF url(1280.jpg) top center no-repeat fixed;}</style>');
	}
	if (screen.width < 950)  {
  	document.write('<style type="text/css">body {font: normal 83% "tahoma", georgia, verdana, sans-serif; color: #688345; background: #90FFFF url(800.jpg) top center no-repeat fixed;}</style>');
	}
	if ((screen.width >= 950) && (screen.width <= 1269)) {
	document.write('<style type="text/css">body {font: normal 83% "tahoma", georgia, verdana, sans-serif; color: #688345; background: #90FFFF url(1024.jpg) top center no-repeat fixed;}</style>');
	}

5b) Questo è quanto invece ho messo nel file index, nella sezione head:

Codice: Seleziona tutto

<script type="text/javascript" src="scelta_bg.js"></script>
<link rel="stylesheet" type="text/css"  title="principale" href="main.css" />

Magia: in tutti e tre i browsers suddetti il comportamento è come lo volevo: a seconda della risoluzione dello schermo, viene caricata l'immagine di background corretta.

Non ho ancora controllato se verrà poi validato XHTML 1.0 strict... ma spero di si...

Ad ogni modo, io lo posto qua, spero di essere utile a qualcuno, chi vuole discuterne è libero di farlo, naturalmente... il confronto è sempre bello, si imparano un sacco di cose !!