CSS Background: proprietà css di sfondo

0

Avete creato un sito ed ora volete aggiungere uno sfondo tramite css? Ecco tutti gli esempi di background position e proprietà per impostare un‘immagine di sfondo nel CSS del vostro template.

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 con il corpo della pagina (background-attachment).

Di seguito vedremo quindi come inserire uno sfondo con CSS e tutte le possibilità di inserimento, utile talvolta anche per wordpress!

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.

Ti è piaciuto questo articolo?

Clicca sulle stelle per votare!

Media voto 5 / 5. Voti: 1

Grazie per aver votato...

Seguici sui social!

Lascia un commento

La tua email non verrà resa pubblica.