CSS Background: proprietà css di sfondo
La proprietà css background permette di personalizzare lo sfondo d’un elemento con la scelta di un colore di sfondo (background-color) o di un’immagine (background-image).
Questa immagine potrà allora essere duplicata o no (background-repeat), posizionata (background-position) e resa scrollabile o no con il corpo della pagina (background-attachment).
1. background-image
La proprietà css background-image permette di aggiungere un’immagine di sfondo in format jpg, gif, png…
background-image: url();
Con il valore url() un’immagine di sfondo è aggiunta all’elemento.
Di default, l’immagine è duplicata sia orizzontalmente che verticalmente.
Esempio:
background-image: url(star.jpg);
background-image: none;
Il valore none è il valore di default, nessuna immagine di sfondo è aggiunta.
2. background-repeat
La proprietà css background-repeat permette di duplicare o no l’immagine di sfondo sia orizzontalmente che verticalmente.
background-repeat: repeat;
Il valore repeat è il valore di default. L’immagine è duplicata sia orizzontalmente che verticalmente.
Esempio:
background-image: url(star.jpg);
background-repeat: repeat;
o in breve…
background: url(star.jpg) repeat;
NB: lo stesso risultato che quando abbiamo semplicemente aggiunto l’immagine di sfondo con
background-image: url(star.jpg); senza specificare un valore al background-repeat.
background-repeat: repeat-x;
Con il valore repeat-x, l’immagine di sfondo è duplicata orizzontalmente.
Esempio:
background-image: url(star.jpg);
background-repeat: repeat-x;
o in breve…
background: url(star.jpg) repeat-x;
background-repeat: repeat-y;
Con il valore repeat-y, l’immagine di sfondo è duplicata verticalmente.
Esempio:
background-image: url(star.jpg);
background-repeat: repeat-y;
o in breve…
background: url(star.jpg) repeat-y;
background-repeat: no-repeat;
Con il valore no-repeat, l’immagine di sfondo non è duplicata e una unica istanza dell’immagine è visualizzata.
Di default, l’immagine è posizionata in alto a sinistra.
Esempio:
background-image: url(star.jpg);
background-repeat: no-repeat;
o in breve…
background: url(star.jpg) no-repeat;
3. background-position
La proprietà css background-position permette di posizionare l’immagine di sfondo in relazione all’elemento a quale è stato impostato.
La sua posizione può essere specificata usando valore in %, unità di misure (es:px) o parole inglese definite.
background-position: X% Y%;
Per impostare la posizione dello sfondo è richiesto 2 valori in % che rappresentano l’asso orizzontale (X) e verticale (Y) con l’angolo in alto a sinistra uguale a 0% 0%.
Esempio:
background-image: url(star.jpg);
background-repeat: no-repeat;
background-position: 25% 75%;
o in breve…
background: url(star.jpg) no-repeat 25% 75%;
Se solo un valore è dato, il secondo prenderà automaticamente il valore uguale a 50%.
background-position: Xpx Ypx;
Questo valore ha le stesse proprietà che il valore in %. L’unica differenza è che le misure sono definite in px o altre supportate in css.
Esempio:
background-image: url(star.jpg);
background-repeat: no-repeat;
background-position: 70px 20px;
o in breve…
background: url(star.jpg) no-repeat 70px 20px;
Come prima, se solo un valore è dato, il secondo prenderà automaticamente il valore uguale a 50%.
background-position: top left;
Con il valore top left, l’immagine di sfondo è posizionata in alto a sinistra.
Esempio:
background-image: url(star.jpg);
background-repeat: no-repeat;
background-position: top left;
o in breve…
background: url(star.jpg) no-repeat top left;
NB: lo stesso risultato che quando abbiamo specificatobackground-repeat: no-repeat;
senza specificare un valore al background-position.
background-position: top center;
Con il valore top center, l’immagine di sfondo è posizionata in alto e centrata orizzontalmente.
Esempio:
background-image: url(star.jpg);
background-repeat: no-repeat;
background-position: top center;
o in breve…
background: url(star.jpg) no-repeat top center;
background-position: top right;
Con il valore top right, l’immagine di sfondo è posizionata in alto a destra.
Esempio:
background-image: url(star.jpg);
background-repeat: no-repeat;
background-position: top right;
o in breve…
background: url(star.jpg) no-repeat top right;
background-position: center left;
Con il valore center left, l’immagine di sfondo è centrata verticalmente a sinistra.
Esempio:
background-image: url(star.jpg);
background-repeat: no-repeat;
background-position: center left;
o in breve…
background: url(star.jpg) no-repeat center left;
background-position: center center;
Con il valore center center, l’immagine di sfondo è centrata sia verticalmente che orizzontalmente.
Esempio:
background-image: url(star.jpg);
background-repeat: no-repeat;
background-position: center center;
o in breve…
background: url(star.jpg) no-repeat center center;
background-position: center right;
Con il valore center right, l’immagine di sfondo è centrata verticalmente a destra.
Esempio:
background-image: url(star.jpg);
background-repeat: no-repeat;
background-position: center right;
o in breve…
background: url(star.jpg) no-repeat center right;
background-position: bottom left;
Con il valore bottom left, l’immagine di sfondo è posizionata in basso a sinistra.
Esempio:
background-image: url(star.jpg);
background-repeat: no-repeat;
background-position: bottom left;
o in breve…
background: url(star.jpg) no-repeat bottom left;
background-position: bottom center;
Con il valore bottom center, l’immagine di sfondo è posizionata in basso e centrata orizzontalmente.
Esempio:
background-image: url(star.jpg);
background-repeat: no-repeat;
background-position: bottom center;
o in breve…
background: url(star.jpg) no-repeat bottom center;
background-position: bottom right;
Con il valore bottom right, l’immagine di sfondo è posizionata in basso a destra.
Esempio:
background-image: url(star.jpg);
background-repeat: no-repeat;
background-position: bottom right;
o in breve…
background: url(star.jpg) no-repeat bottom right;
4. background-attachment
La proprietà background-attachment permette di specificare se l’immagine di sfondo è scrollabile con il corpo della pagina (body) o no.
background-attachment: scroll;
Per definizione, con il valore scroll, l’immagine di sfondo è scrollabile con il corpo della pagina e non con l’elemento che lo contiene. Con Internet Explorer invece lo sfondo scrolla con l’elemento stesso.
Questo valore è quello di default.
Esempio:
background-image: url(star.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
o in breve…
background: url(star.jpg) no-repeat center center scroll;
background-attachment: fixed;
Con il valore fixed, l’immagine di sfondo è fissa (sempre in rapporto al corpo della pagina) e non è scrollabile. NB: per gli elementi altro che body questa proprietà acceta solo i 2 valori url e fixed
background-image: url(star.jpg);
background-attachment: fixed;
o in breve…
background: url(star.jpg) fixed;
5. background-color
La proprietà  background-color permette di specificare un colore di sfondo in valore rgb, hex o con nomi definiti.
background-color: rgb();
Esempio:
background-color: rgb(255,204,0);
background-color: #;
Esempio:
background-color: #FF1493;
background-color: nome;
Esempio:
background-color: black;
Sono 16 i nomi di colore che passano la validazione html e css:
Una lista completa degli altri nomi è disponibile sul sito della w3c.
background-color: aqua; (valore hex:#00FFFF)
background-color: black; (valore hex:#000000)
background-color: blue; (valore hex:#0000FF)
background-color: fuchsia; (valore hex:#FF00FF)
background-color: gray; (valore hex:#808080)
background-color: green; (valore hex:#008000)
background-color: lime; (valore hex:#00FF00)
background-color: maroon; (valore hex:#800000)
background-color: navy; (valore hex:#000080)
background-color: olive; (valore hex:#808000)
background-color: purple; (valore hex:#800080)
background-color: red; (valore hex:#FF0000)
background-color: silver; (valore hex:#C0C0C0)
background-color: teal; (valore hex:#008080)
background-color: white; (valore hex:#FFFFFF)
background-color: yellow; (valore hex:#FFFF00)
background-color:transparent;
Il valore transparent è di default. L’elemento ha uno sfondo trasparente.
About The Author
paolo
CSS SPRITE …. buongiorno a tutti, ho letto in questi giorni articoli sulla tecnica dei css sprite, che riducono i tempi di caricamento immagine: bellissimo, mi funziona tutto quando imposto l’immagine con x e y, (uso DW cs3) e da poco ho cominciato a capire i CSS…ma quando voglio usare un semplice bottone con due piccole immagini che cambia allo stato :hover non funziona nulla…ebbene si non riesco a capire come funziona, dove!! Se ho un div di una misura posso solo inserire background-image ma come applico a questo div lo stato :hover con un’immagine nuova??
Mi aiutate per favore, non riesco proprio ad uscire da sta cosa, ho cercato in internet, ma tutti spiegano lo stato :hover cosa contiene, ma come faccio a collegarlo (in DW cs3) solo al DIV che mi interessa???
grazie comunque e buona giornata
Onsitus
Ciao Paolo,
mi dispiace ma non uso dreamweaver, scrivo il tutto a mano!
L’idea è di dare un nome di class al tuo div e basato su quel nome li applica il stato hover. Es: .mioDiv:hover
In questo caso meglio usare un unica immagine come sfondo che contiene tutti i stati (normale e hover) per evitare scatti. Tutta l’immagine viene caricata da l’inizio e pronta a l’uso. Un esempio sarebbe: http://css.flepstudio.org/css-tutorials/3-stati-pulsanti-css.html
Nel tuo caso di 2 stati basta applicare il background:url(sfondo.jpg) no-repeat top left; al tuo div e sullo stato hover, background-position:bottom left;
Nota che Internet Explorer 6 supporta :hover solo per link (elementi html <a>) come spiegato qui: http://css.flepstudio.org/css-proprieta/selettori-css.html#selettore_hover_active
paolo
grazie, sei stata molto chiara provo e ti dico
paolo
ok sono riuscito su una pagina isolata ad ottenere i due stai del menu e del bottone con una solo immagine che contiene i due stati. Ora la cosa si complica…vediamo se mi puoi aiutare. Io ho già  una pagina in css sempre realizzata in DW dove alla base ho 5 div ognuno dei quali contiene attualmente due immagini che in javascript scambiano l’immagine…la domanda è questa come posso applicare l’unica immagine con i vari stati come i pulsanti di cui abbiamo parlato prima? Devo realizzare una classe con lo stato :hover? ma come la applico al div poi?
Onsitus
Come spiegato prima, nella struttura html, devi dare il nome di classe al div per potere selezionarlo ed applicare lo style css desiderato tipo:
<div class="mioDiv">
paolo
ma è proprio questa cosa che non capisco, io ho letto di codice con :hover…e tu mi parli di class, qual’è il div class e il mio div? troppo difficile non capisco, grazie comunque
Onsitus
Buongiorno Paolo,
per applicare un stile css a un div preciso li deve dare un nome identificativo. Senza lo stile sarà  applicato a tutti i div della tua pagina.
Devi aggiungere solo la parte class=”mioDiv” (a qualunque altro nome che vuoi) al tuo elemento div. Aggiungilo manualmente al tuo html. Non so se DW ha un opzione per farlo automaticamente!
I cosi detto selettori sono le base del uso dei css, per piu informazione sulle classe: http://css.flepstudio.org/css-proprieta/selettori-css.html#selettore_class
paolo
buonasera onsitus, ti ringrazio ancora ma il problema come dici è proprio cercare di farlo passo dopo passo con dreamweaver, che però tu non adoperi, quindi ti chiedo se conosci qualcuno o qualche sito/forum a cui chiedere questo problema…
Onsitus
Ok, scusa non avevo capito che era quello il tuo problema. Con Dreamweaver, hai la scelta di visualizzazione tra Codice, Codice/Progettazione o Progettazione. Scegli la vista codice (visualizza>codice o dal pulsantino nella barra dei strumenti), posiziona il tuo cursor nel tag div d’apertura, scrive il nome della classe.
Riferimento: la guida di Dreamweaver della adobe.
Raffaella
Buongiorno a tutti, c’è un modo per ripetere lo sfondo sull’asse delle x ma solo nella parte sinistra o destra?
grazie a tutti
Onsitus
Buongiorno Raffaella,
mi dispiace ma non si puo. Con repeat-x, l’immagine si ripeta automaticamente per tutta la larghezza disponibile. O usa un unica immagine di sfondo con repeat:none; o aggiungi un elemento extra nella struttura html della misura desiderata per delimitare il repeat-x.
barbara
Ciao,
ho un problema con ie6 ho usato come sfondo di un div un’immagine e l’ho posizionata in basso, con tutti browser si vede correttamente ma con ie6 l’immagine viene allungata e il div risulta più largo, come posso fare? Grazie mille in anticipo
Giorgio
Ciao,
la possibilità di inserire diverse immagini di sfondo nel body è supportata da explorer? perchè ho qualche difficoltà  (come qualunque cosa con sto browser…)
Onsitus
Ciao Giorgio, mi dispiace ma no.
http://css.flepstudio.org/css3/sfondi-multipli.html
Arianna
ciao a tutti!
Sono assolutamente ignorante in materia….veramente in ogni cosa riguardi l’informatica! Io non so più come poter creare un blog a modo mio,con sfondi,colori,grafica ecc,che voglio io,senza usufruire di pagine già create da altri……..COME POSSO FARE? Non riesco proprio a capire nemmeno dove dovrei inserire questi codici e come comporli…AIUTO! Ci tengo moltissimo a crearlo il blog…..GRAZIE MILLE,sia che i aiutiate sia che non lo facciate!!!!
Onsitus
Ciao Arianna, visto che il discorso potrebbe essere lungo, meglio che usi il forum per fare le tue domande: http://www.flepstudio.org/forum/css-html/
Rosanna
Ciao Onsitus,
ho un problema con gli sfondi.. Ho bisogno di impostare uno sfondo con un colore chje abbia però anche un’immagine posizionata in alto al centro e un’altra che si ripeta sotto a quest’ultima sulla linea orizzontale.
Come faccio?
Ho fatto varie tentativi anche provando ad utilizzare il z-index (che non mi funziona) ma proprio non ci riesco!
Mi puoi aiutare? Grazie 1000!
Rosanna
MI stavo ponendo un’altra domanda…
è possibile ripetere un’immagine solo a partire da una certa posizione?
Ho proveto ad es. ad inserire il codice
background:url(../img/immagine.png) repeat-y 1000px 247px;
ma vedo che mi ripete l’immagine lungo tutto l’asse delle y.
Sono io che sbaglio a scrivere?
Jonas
Grande… preciso e completo.
E chiaro!!
Grazie mille