Gestione dello sfondo pagina con i CSS
1 Commento - Categoria: CSS
Esamineremo in questa lezione le proprietà relative alla gestione dello sfondo. Sin dalle origini di HTML è stato possibile definire un colore o un’immagine di sfondo per le nostre pagine web.
La scelta si restringe comunque a due elementi: il corpo principale della pagina (<BODY>) o le tabelle. Un’altra limitazione riguarda il comportamento delle immagini di sfondo: esse vengono infatti ripetute in senso orizzontale e verticale fino a riempire l’intera area della finestra, del frame o della tabella.
Proprio questo comportamento ha fatto sempre propendere per la scelta di piccole textures in grado di dare la sensazione visiva dell’ uniformità. Grazie ai CSS queste limitazioni vengono spazzate via e le possibilità creative, compatibilità permettendo, sono davvero infinite.
Ecco la lista delle proprietà, applicabili, ed è questa la prima grande innovazione dei CSS, a tutti gli elementi:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Ciascuna di essa definisce un solo, particolare aspetto relativo allo sfondo di un elemento. La proprietà background, invece, è una proprietà a sintassi abbreviata con cui possiamo definire sinteticamente e con una sola dichiarazione tutti i valori per lo sfondo. La analizeremo alla fine. Prima è necessario chiarire significato e sintassi delle proprietà singole. Ma andiamo ad eseminare i 5 parametri per la gestione dello sfondo:
background-color
Definisce il colore di sfondo di un elemento. Questa proprietà non è ereditata. Sintassi:
selettore {background-color: <valore>;}
i valori possono essere due: la parola chiave trasparent o un qualsiasi colore in formato esadecimale (#000000).
Per chi non conoscesse la tabella esadecimale dei colori, guardi la tavolozza presente nella categoria Webdesign nella lezione sui principi di webdesign.
Esempi:
body {
background-color: white; }
p { background-color: #FFFFFF; }
.classe1 { background-color: rgb(0, 0, 0)}
background-image
Definisce l’URL di un’immagine da usare come sfondo di un elemento. Sintassi:
selettore { background-image: url(<valore>); }
i valori possono essere o l’url dell’immagine o la parola chiave none.
body {background-image: url(sfondo.gif); }
div body {background-image: url(http://www.kabuia.com/images/sfondo.gif); }
Usando questa proprietà da sola si ottiene lo stesso risultato che in HTML si aveva con l’attributo background.
background-repeat
Con questa proprietà iniziano le novità. Essa consente di definire la direzione in cui l’immagine di sfondo viene ripetuta. Sintassi:
selettore {background-repeat: <valore>;}
i valori in question possono essere 4:
- repeat L’immagine viene ripetuta in orizzontale e verticale. E’ il comportamento standard
- repeat-x L’immagine viene ripetuta solo in orizzontale
- repeat-y L’immagine viene ripetuta solo in verticale
- no-repeat L’immagine non viene ripetuta
Esempi:
body { background-image: url(sfondo.gif); background-repeat: repeat; }
div { background-image:url(sfondo.gif); background-repeat: repeat-x; }
background-attachment
Con questa proprietà si imposta il comportamento dell’immagine di sfondo rispetto all’elemento cui è applicata e all’intera finestra del browser. Si decide, in pratica, se essa deve scorrere insieme al contenuto o se deve invece rimanere fissa.
Sintassi:
selettore {background-attachment: <valore>;}
i valori possono essere, appunto due, fixed e scroll.
Questa proprietà consente risultati estetici di grande impatto ed è consigliabile, per ottenerne il meglio, usarla sia in combinazione con le altre proprietà sia con immagini grandi.
Esempi:
body { background-image: url(back_400.gif);
background-repeat: repeat-x;
background-attachment: fixed; }
background-position
Proprietà un pò complessa. Definisce il punto in cui verrà piazzata un’immagine di sfondo non ripetuta o da dove inizierà la ripetizione di una ripetuta. Attenzione alla compatibilità e alla resa, non omogeena, tra i vari browser.
Sintassi:
selettore {background-position: <valore> o <valori>;}
I valori possibili sono diversi. Tutti però definiscono le coordinate di un punto sull’asse verticale e su quello orizzontale. Ciò può avvenire nei seguenti modi:
body {
background-image: url(back_400.gif);
background-repeat: no-repeat;
background-position: 50px 50px;
}
Significa che l’immagine apparirà a 50px dal bordo superiore e a 50px da quello sinistro della finestra. Potevo usare invece dei pixel altre unità di misura o percentuali. Come al solito, la scelta delle percentuali mi assicura una maggiore affiidabilità a risoluzioni diverse. Allo stesso modo potevo utilizzare le parole chiave. Se, ad esempio, uso:
body {
background-image: url(back_400.gif);
background-repeat: no-repeat;
background-position: center center;
}
Logica vuole, trattandosi di definire le coordinate che si impostino due valori. Definendone uno solo esso sarà usato sia per l’asse orizzontale che per quello verticale.
background
E veniamo alla proprietà background. Con essa, ricordiamolo, possiamo definire in un colpo solo tutti gli aspetti dello sfondo. Per essere valida, la dichiarazione non deve contenere necessariamente riferimenti a tutte le proprietà viste finora, ma deve contenere almeno la definizione del colore di sfondo.
Sintassi:
selettore {background:
background-color
background-image
background-repeat
backgroundattachment
background-position;}
Gli argomenti non vanno separati da virgole. L’ordine non è importante, ma quello dato è il più logico e andrebbe rispetatto: si va in ordine di importanza.
leonardo
andrea scusami per la domanda da completo idiota ma ho appena iniziato
con i css.
proprio per iniziare ho deciso di creare un file style.css molto semplice:
body
{background-image: url (“http://aphorismandquote.altervista.org/background.jpg”)no-repeat 0 0}
e un file index2.html di prova, solo per vederne il risultato ecco il file:
prova
ti prego andrea mi puoi dire cosa ho sbagliato (scusa ancora per la domanda da idiota)