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;
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)
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...
[...] proprietà css background con il valore no-repeat per gli elementi em e b e il valore repeat-x per l’elemento [...]
[...] 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 [...]
[...] sarà realizzata usando la proprietà CSS background-position, spostando il sfondo con i valori top, center e [...]
[...] Il nostro box può finalmente avere uno sfondo decorativo con la proprietà css background. [...]
[...] 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. [...]
[...] Il color permette di dare un colore al testo usando valori esadecimale, RGB o un nome specifico (le stesse che per il background-color) [...]
[...] 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 [...]
[...] l’immagine di sfondo usando la proprietà css background [...]