CSS multiple backgrounds

In this chapter, you will learn how to add multiple background images to an element.

You will also learn the following properties:

  • background-size
  • background-origin
  • background-clip

CSS multiple backgrounds

CSS allows you to use background-image This property adds multiple background images to an element.

Different background images are separated by commas, and they are stacked on top of each other, with the first image closest to the viewer.

The following example has two background images: the first image is a flower (aligned with the bottom and right), and the second image is a paper background (aligned with the top left):

Esempio

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

Prova da solo

Multiple background images can be specified using a single background property (as mentioned above) or background abbreviated properties to specify.

The following example uses background Abbreviated properties (results are the same as in the previous example):

Esempio

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

Prova da solo

CSS 背景尺寸

CSS background-size Dimensione delle immagini di sfondo CSS

L'attributo consente di specificare la dimensione dell'immagine di sfondo.contain La dimensione dell'immagine di sfondo può essere specificata utilizzando lunghezze, percentuali o uno dei due termini chiave seguenti: coverAltri due valori possibili di

oppure

Ese esempio riduce la dimensione dell'immagine di sfondo a molto meno rispetto all'immagine originale (in pixel):

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Esempio

#div1 {
  background: url(img_flower.jpg);
  Questo è il codice:
  background-repeat: no-repeat;
}

Prova da solo

background-size background-size: 100px 80px; contain e coverAltri due valori possibili di

contain .

cover Le parole chiave riducono l'immagine di sfondo in modo che l'area di contenuto sia completamente coperta dall'immagine di sfondo (le cui dimensioni sono uguali o superiori all'area di contenuto). Di conseguenza, alcune parti dell'immagine di sfondo potrebbero non essere visibili nell'area di posizionamento dello sfondo. Le parole chiave ingrandiscono l'immagine di sfondo il più possibile (ma devono adattarsi alle dimensioni dell'area di contenuto). A seconda della proporzioni dell'immagine di sfondo e dell'area di posizionamento dello sfondo, potrebbe esserci alcune aree di sfondo non coperte dall'immagine di sfondo.

Ecco un esempio che mostra: contain e cover Modo d'uso:

Esempio

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

Prova da solo

Definire le dimensioni di più immagini di sfondo

Nel gestire più sfondi:background-size L'attributo accetta anche più valori di impostazione della dimensione dello sfondo (elencati con virgola).

Ese esempio specifica tre immagini di sfondo, ognuna con un valore diverso di background-size:

Esempio

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat; 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

Prova da solo

Immagine di sfondo a piena risoluzione

Ora, vogliamo che l'immagine di sfondo del sito copra sempre l'intera finestra del browser.

Specifiche dettagliate:

  • Riempie l'intera pagina con l'immagine (nessun spazio vuoto)
  • Scala l'immagine secondo necessità
  • Centra l'immagine nella pagina
  • Non provoca la barra di scorrimento

Ecco come farlo: usa l'elemento <html> (l'elemento <html> è sempre almeno altezza della finestra del browser). Poi imposta lo sfondo come fisso e centrato. Infine, usa la proprietà background-size per regolare la dimensione:

Esempio

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

Prova da solo

Hero Image

Puoi anche usare diverse proprietà di sfondo su <div> per creare un Hero Image (un'immagine grande con testo) e posizionarlo dove desideri.

Esempio

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

Prova da solo

Proprietà background-origin CSS

CSS background-origin La proprietà specifica la posizione dell'immagine di sfondo.

Questa proprietà accetta tre valori diversi:

  • border-box - L'immagine di sfondo inizia dall'angolo in alto a sinistra del margine di bordo
  • padding-box - L'immagine di sfondo inizia dall'angolo in alto a sinistra del margine interno (predefinito)
  • content-box - L'immagine di sfondo inizia dall'angolo in alto a sinistra del contenuto

Ecco un esempio che mostra: background-origin Proprietà:

Esempio

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

Prova da solo

Proprietà background-clip CSS

CSS background-clip La proprietà specifica l'area di disegno dello sfondo.

Questa proprietà accetta tre valori diversi:

  • border-box - Disegna lo sfondo fino all'esterno del margine di bordo (predefinito)
  • padding-box - Disegna lo sfondo fino all'esterno del margine interno
  • content-box - Disegna lo sfondo nel riquadro di contenuto

Ecco un esempio che mostra: background-clip Proprietà:

Esempio

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

Prova da solo

Proprietà avanzate di sfondo CSS

Proprietà Descrizione
background Proprietà abbreviate utilizzate per impostare tutte le proprietà di sfondo in una dichiarazione.
background-clip Definire l'area di disegno dello sfondo.
background-image Specificare una o più immagini di sfondo per un elemento.
background-origin Definire la posizione dell'immagine di sfondo.
background-size Definire la dimensione dell'immagine di sfondo.