Sfondo CSS

CSS consente di applicare colori puri come sfondo e anche di utilizzare immagini di sfondo per creare effetti piuttosto complessi.

La capacità di CSS in questo senso è molto superiore a quella di HTML.

Colore di sfondo

È possibile utilizzare Proprietà background-colorImpostare un colore di sfondo per l'elemento. Questa proprietà accetta qualsiasi valore di colore legittimo.

Questa regola imposta il colore di sfondo dell'elemento in grigio:

p {background-color: gray;}

Se desideri che il colore di sfondo si estenda leggermente dal testo dell'elemento, aggiungi un po' di spaziatura interna:

p {background-color: gray; padding: 20px;}

Try it yourself

È possibile impostare un colore di sfondo per tutti gli elementi, inclusi body fino a em e a altri elementi inline.

background-color non può essere ereditato, il suo valore predefinito è transparent. Transparente significa "trasparente". Questo significa che se un elemento non specifica un colore di sfondo, il suo sfondo sarà trasparente, in modo che il sfondo dei suoi elementi ancestor sia visibile.

Immagine di sfondo

Per inserire un'immagine di sfondo, è necessario utilizzare Attributo background-image.Il valore predefinito dell'attributo background-image è none, che indica che non ci sono immagini di sfondo posizionate.

Per impostare un'immagine di sfondo, è necessario assegnare un valore URL a questo attributo:

body {background-image: url(/i/eg_bg_04.gif);}

La maggior parte degli sfondi viene applicata all'elemento body, ma non è limitata a questo.

Ecco un esempio di un paragrafo con uno sfondo applicato senza applicare uno sfondo ad altre parti del documento:

p.flower {background-image: url(/i/eg_bg_03.gif);}

È anche possibile assegnare un'immagine di sfondo agli elementi inline. Ecco un esempio di un link con un'immagine di sfondo:

a.radio {background-image: url(/i/eg_bg_07.gif);}

Try it yourself

Teoricamente, è possibile applicare un'immagine di sfondo anche a elementi sostitutivi come textareas e select, ma non tutti i browser gestiscono questa situazione in modo ottimale.

Inoltre, va aggiunto che background-image non può essere ereditato. Infatti, tutti gli attributi di sfondo non possono essere ereditati.

Ripetizione dello sfondo

Se si desidera ripetere l'immagine di sfondo sullo schermo, si può utilizzare Attributo background-repeat.

Il valore dell'attributo repeat provoca che l'immagine si ripeta sia in orizzontale che in verticale, come nel caso consueto delle immagini di sfondo. repeat-x e repeat-y causano che l'immagine si ripeta solo in orizzontale o in verticale, mentre no-repeat non permette la ripetizione dell'immagine in nessuna direzione.

Per default, l'immagine di sfondo inizia dall'angolo sinistro superiore di un elemento. Ecco un esempio:

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

Try it yourself

Posizionamento dello sfondo

Si può utilizzare Attributo background-positionModificare la posizione dell'immagine nello sfondo.

Ecco un esempio che posiziona un'immagine di sfondo al centro dell'elemento body:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position: center;
  }

Ci sono molti metodi per fornire valori all'attributo background-position. Prima di tutto, si possono utilizzare alcune parole chiave: top, bottom, left, right e center. Di solito, queste parole chiave appaiono in coppia, ma non è sempre così. È anche possibile utilizzare valori di lunghezza, come 100px o 5cm, e infine anche valori percentuali. Diversi tipi di valori influenzano leggermente la posizione dell'immagine di sfondo.

Termini chiave

I termini chiave di posizionamento delle immagini sono più facili da capire, e agiscono come suggerito dal loro nome. Ad esempio, top right posiziona l'immagine nell'angolo in alto a destra dell'area di spaziatura interna dell'elemento.

Secondo lo standard, i termini chiave possono apparire in qualsiasi ordine, purché non superino due termini - uno per la direzione orizzontale e l'altro per la direzione verticale.

Se viene fornito solo un termine chiave, si considera che l'altro termine chiave sia center.

Quindi, se si desidera che ogni paragrafo abbia un'immagine al centro superiore, è sufficiente dichiarare come segue:

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

Ecco i termini chiave equivalenti:

Termine chiave singolo Termini chiave equivalenti
center center center
top top center o center top
bottom bottom center o center bottom
right right center o center right
left left center o center left

Valori percentuali

Il modo in cui i valori percentuali si esprimono è più complesso. Supponiamo che si desideri posizionare un'immagine al centro dell'elemento utilizzando valori percentuali, è molto semplice:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

Questo farà sì che l'immagine sia posizionata correttamente, con il suo centro allineato con il centro dell'elemento.In altre parole, i valori percentuali si applicano sia all'elemento che all'immagine.Questo significa che il punto descritto come 50% 50% nell'immagine (punto centrale) è allineato con il punto descritto come 50% 50% nell'elemento (punto centrale).

Se l'immagine è posizionata a 0% 0%，il suo angolo in alto a sinistra verrà posizionato all'angolo in alto a sinistra dell'area di spaziatura interna dell'elemento. Se la posizione dell'immagine è 100% 100%，il suo angolo in basso a destra verrà posizionato all'angolo in basso a destra del margine.

Quindi, se si desidera posizionare un'immagine a 2/3 di altezza e 1/3 di larghezza, si può dichiarare così:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

Se viene fornito solo un valore percentuale, questo valore viene utilizzato come valore orizzontale, mentre il valore verticale viene supposto essere il 50%. Questo è simile a un termine chiave.

Il valore predefinito di background-position è 0% 0%，che funziona come top left. Questo spiega perché l'immagine di sfondo viene sempre stesa dall'angolo in alto a sinistra dell'area di spaziatura interna dell'elemento, a meno che non venga impostata una posizione diversa.

Length values

Length values explain the offset from the top left corner of the padding area of the element. The offset point is the top left corner of the image.

For example, if the value is set to 50px 100px, the top left corner of the image will be 50 pixels to the right and 100 pixels down from the top left corner of the padding area of the element:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

Note that this is different from percentage values, because the offset is only from one top left corner to another top left corner. That is, the top left corner of the image aligns with the point specified in the background-position declaration.

Background association

If the document is long, then when the document scrolls down, the background image will also scroll. When the document scrolls past the position of the image, the image will disappear.

You can use background-attachment propertyPrevent this scrolling. With this property, you can declare that the image is fixed relative to the visible area (fixed), so it is not affected by scrolling:

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

Try it yourself

The default value of the background-attachment property is scroll, which means that in the default case, the background will scroll with the document.

CSS Background Example

Set the background color
This example demonstrates how to set the background color for an element.
Set the background color of the text
This example shows how to set the background color of part of the text.
Set the image as background
This example demonstrates how to set the image as the background.
Set the image as background 2
This example demonstrates how to set a background image for multiple elements at the same time.
How to repeat the background image
This example demonstrates how to repeat the background image.
How to repeat the background image vertically
This example demonstrates how to repeat the background image vertically.
How to repeat the background image horizontally
This example demonstrates how to repeat the background image horizontally.
How to display the background image only once
This example demonstrates how to display the background image only once.
How to place the background image
This example demonstrates how to place the background image on the page.
How to position the background image using %
This example demonstrates how to use percentages to position the background image on the page.
How to position the background image using pixels
This example demonstrates how to use pixels to position the background image on the page.
How to set a fixed background image
This example demonstrates how to set a fixed background image. The image will not scroll with the rest of the page.
All background properties in one declaration
Questo esempio dimostra come utilizzare le proprietà abbreviate per impostare tutte le proprietà di sfondo in una sola dichiarazione.

Proprietà di sfondo CSS

Proprietà Descrizione
background Proprietà abbreviate, che consentono di impostare le proprietà di sfondo in una sola dichiarazione.
background-attachment Se l'immagine di sfondo è fissa o scorre con il resto della pagina.
background-color Impostare il colore di sfondo dell'elemento.
background-image Impostare l'immagine come sfondo.
background-position Impostare la posizione iniziale dell'immagine di sfondo.
background-repeat Impostare se e come ripetere l'immagine di sfondo.