You Are Here: Home » CSS Proprietà » CSS Background: proprietà css di sfondo

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;

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

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;

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

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.

This article in english >>

Sponsors of this article

About The Author

WebMaster

CEO e amministratore Network Flepstudio.org

Number of Entries : 85

Comments (38)

  • 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

    Reply
  • 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

    Reply
  • paolo

    grazie, sei stata molto chiara provo e ti dico

    Reply
  • 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?

    Reply
  • 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">

    Reply
  • 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

    Reply
  • 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

    Reply
  • 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…

    Reply
  • 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.

    Reply
  • 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

    Reply
  • 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.

    Reply
  • 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

    Reply
  • 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…)

    Reply
  • 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!!!!

    Reply
  • 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/

    Reply
  • 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!

    Reply
  • 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?

    Reply
  • Jonas

    Grande… preciso e completo.
    E chiaro!!
    Grazie mille

    Reply

Leave a Comment

© 2012 Powered By Flepstudio.org

Scroll to top