Personalizzare lo sfondo del sito

Per skin per GuppY v4.5 e 4.6

Per mettere uno sfondo al sito, che copra la totalità dello schermo avete vari metodi da poter usare, per iniziare dovete aprire il file style.css della skin che è quello su cui lavoreremo per personalizzare lo sfondo.

La classe "body" sulla quale andremo ad agire si trova verso l'inizio del file

body { /*corps du document*/
margin : 0;
font : 12px arial, helvetica, sans-serif;
color : #000000;
background-color : #7F7F7F;/*couleur fond derriere page principale du site*/
}

Lo sfondo di un colore unico :

La linea del codice che ci interessa è quella dove troviamo "background-color", qui il codice del colore #7F7F7F, permette di attribuire un colore grigio scuro di sfondo.

In questa immagine che rappresenta in maniera molto semplificata un sito guppy, lo sfondo porta il numero 1, questo caso sarà visibile solo a condizione che lo sfondo della pagina contrassegnato con il (2) sia più piccolo o sia trasparente. Le parti segnate come 3 e 4 sono rispettivamente i box centrali e laterali.

Se si vuole applicare un colore unico si deve modificare la parte di codice relativa al colore.

Lo sfondo è un'immagine.

Un'immagine fissa che copra tutta l'immagine.

Dovete scegliere un'immagine abbastanza grande che copra tutta la superficie disponibile dello schermo, possibilmente di uno schermo standard, attualmente sono più usati i 17 pollici ma si deve considerare che la tendenza è di averne di più grandi, attenzione anche al peso dell'immagine, un'immagine troppo pesante potrebbe rallentare il caricamento della pagina.
Per richiamare l'immagine dovremmo andare ad agire sulla classe body del file style.css nel seguente modo :

Un'immagine che si duplicherà su tutta la superfice della pagina :

Orizzontalmente e verticalmente :

		body { margin: 0; background-image: url(fond.jpg); background-repeat : repeat; font : 12px arial, helvetica, sans-serif; color : #FF0000; background-color : #FFFFFF; }
L'immagine scelta di base	questa immagine si duplicherà su tutto lo schermo. (Dall'alto in basso e da sinistra a destra)	L'attributo repeat permette di duplicare l'immagine
Orizzontalmente
		body { margin: 0; background-image: url(fond.jpg); background-repeat : repeat-x; font : 12px arial, helvetica, sans-serif; color : #FF0000; background-color : #FFFFFF; }
L'immagine scelta di base	questa immagine si duplicherà su tutto lo schermo.  (Da sinistra a destra).	L'attributo repeat-x permette di duplicare l'immagine lungo lasse x (asse orizzontale)

Verticalmente

	L'immagine scelta di base
	body { margin: 0; background-image: url(fond.jpg); background-repeat : repeat-y; font : 12px arial, helvetica, sans-serif; color : #FF0000; background-color : #FFFFFF; }
	L'attributo repeat-y permette di duplicare l'immagine lungo l'asse y (l'asse verticale)

Per riassumere :

La funzione repeat :