|
Controllare il background con i CSS
I Cascading Style Sheets (CSS) rappresentano un modo
fantastico di controllare lo sfondo delle tue pagine.I
seguenti esempi spiegheranno alcuni casi per usare i
Fogli di stile con gli sfondi ed i testi. DA NOTARE:
Tutti gli scripts in CSS devono essere inseriti nella
testa delle tue pagine HTML, ossia in quell'area di
codice racchiusa fra <HEAD> e </HEAD>. Il primo esempio
ti farà vedere anche questo, negli altri sarà
sottointeso dove posizionarli.
Colori di Sfondo
<html>
<head>
<style>
body {background-color: green}
h1 {background-color: #0000FF}
h2 {background-color: transparent}
p {background-color: rgb(200,0,150)}
</style>
</head>
<body>
<h1>Stile Head 1</h1>
<h2>Stile Head 2</h2>
<p>Stile del paragrafo</p>
</body>
</html>
Guarda cosa succede in questo esempio.. Abbiamo assegnato
diversi colori di sfondo a diversi elementi pre-numerati
(in questo caso attraverso i Tag H1, H2 e P). Nota che
ad H2 è stato attribuito il valore "transparent", questo
stà a significare che non ci sarà alcun colore di
sfondo. Ti consigliamo di copiare questo codice tramite
il tuo editor in una pagina e di provare a cambiare i
valori a piacimento!
Immagine di Sfondo
Qui troviamo la spiegazione di come mettere un'immagine di
sfondo attraverso i CSS. Questo ci permette, a
differenza di quanto avveniva con i TAG, di controllare
queste immagini con varie funzioni. Ma innanzi tutto
vediamo come disporre un'immagine di sfondo senza alcun
effetto.
<style>
body
{
background-image:
url(images/immagine_di_sfondo.gif)
}
</style>
Ripetizione dell'immagine sullo sfondo
Attraverso i normali TAG l'immagine usata nello sfondo
veniva ripetuta automaticamente su tutto lo schermo fino
a riempirlo tutto, al massimo ci era permesso di
bloccare lo sfondo. Attraverso i CSS puoi, invece,
decidere di replicare l'immagine a piacimento o solo in
verticale o solo in orizzontale. Per fare questo devi
usare il seguente codice:
<style>
body
{
background-image:
url(images/immagine_di_sfondo.gif);
background-repeat: repeat-y
}
</style>
Sostituisci a repeat-y la keyword repeat-x se vuoi che le
tue immagini siano ripetute orizzontalmente e non
verticalmente.
Posizionamento dello sfondo
Attraverso i Fogli di stile è possibile sùanche
posizionare un'immagine sullo sfondo medante una serie
di coordinate X,Y della tua pagina. Questo è il codice
utile per centrare un'immagine:
<style>
body
{
background-image:
url(images/immagine_di_sfondo.gif);
background-repeat: no-repeat;
background-position: center center
}
</style>
brova anche questi valori: top center, center bottom,
bottom left.
Sfondo Fissato
Questo esempio ti spiegherà come è possibile usare
un'immagine di sfondo Fissata (fixed) ossia che non
simuove insieme al resto della pagina quando muovo le
barre di scorrimento. Purtroppo questo è uno dei tranti
script non supportati dai browser Netscape.
<style>
body
{
background-image:
url(images/immagine_di_sfondo.gif);
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed
}
</style>
|
