HOME | CSS3 | CSS BOX MODEL | CSS TUTORIALS | CSS PROPRIETA | CSS MENU | CSS TEMPLATES | CSS TIPS | FORUM | SITEMAP

CSS3 | CSS Tutorials e risorse css gratuite

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 rappresentono l’asso orizzontale (X) e verticale (Y) con l’angolo
in alto a sinistra uquale 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 uquale 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 uquale 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)

transparent

Il valore transparent è di default. L’elemento ha uno sfondo trasparente.

Registrati al nostro Rss Feed e rimani sempre aggiornati con i nuovi articoli...

8 Commenti on “CSS Background: proprietà css di sfondo”

  1. [...] proprietà css background con il valore no-repeat per gli elementi em e b e il valore repeat-x per l’elemento [...]

    #1 Scritto da Come creare un pulsante css estendibile in larghezza con 3 immagine di sfondo - CSS3 | CSS Tutorials e Risorse css gratuite il 18-06-08 alle 08:06
  2. [...] stato selezionato della versione Flash, ho aggiunto anche l’effetto sullo stato :hover con la proprietà css background-position e ricreato i pulsanti con 3 immagine in maniera di rendere ogni uno estendibile in larghezza in [...]

    #2 Scritto da Tab menu orizzontale - esempio 2 - CSS3 | CSS Tutorials e Risorse css gratuite il 23-06-08 alle 09:07
  3. [...] sarà realizzata usando la proprietà CSS background-position, spostando il sfondo con i valori top, center e [...]

    #3 Scritto da Come creare 3 stati d’un pulsante con un unica immagine in css - CSS e CSS3 blog con tutorials e risorse per css3 e css il 17-07-08 alle 09:01
  4. [...] Il nostro box può finalmente avere uno sfondo decorativo con la proprietà css background. [...]

    #4 Scritto da Introduzione al box model – CSS e CSS3 blog con tutorials e risorse per css3 e css il 29-09-08 alle 22:10
  5. [...] Nella stesura del modulo CSS3 Backgrounds (proprietà dei sfondi), i css3 danno la possibilità di impostare più immagine di sfondo allo stesso elemento e non una unica come al momento usato nelle specifiche della proprietà background in css2. [...]

    #5 Scritto da CSS3 background: uso di sfondi multipli – CSS e CSS3 blog con tutorials e risorse per css3 e css il 22-10-08 alle 08:04
  6. [...] Il color permette di dare un colore al testo usando valori esadecimale, RGB o un nome specifico (le stesse che per il background-color) [...]

    #6 Scritto da Proprietà css text - lo stile dei testi in css – CSS e CSS3 blog con tutorials e risorse per css3 e css il 27-10-08 alle 08:36
  7. [...] fratempo, possiamo ricreare gli angoli arrotondati in css con l’uso di un unica immagine e la proprietà background-position (e qualche extra div nel nostro [...]

    #7 Scritto da Angoli arrotondati con l’uso di una unica immagine di sfondo – CSS e CSS3 blog con tutorials e risorse per css3 e css il 31-10-08 alle 08:28
  8. [...] l’immagine di sfondo usando la proprietà css background [...]

    #8 Scritto da Immagine mappata in css – CSS e CSS3 blog con tutorials e risorse per css3 e css il 03-11-08 alle 06:34

Aggiungi il tuo commento