background-image

<< Guida di riferimento ai CSS

Sommario

La proprietà background-image imposta l'immagine di sfondo di un elemento.

• Valore iniziale: none
• Si applica a: tutti gli elementi
• Eredità: no
• Percentuali: N/A
• Media: visual
• Valore calcolato: URI assoluto o none

Sintassi

background-image:uri | none | inherit

Valori

uri 

L'indirizzo dell'immagine da utilizzare come sfondo

none 

Specifica che l'elemento non ha alcuna immagina di sfondo

Esempi

Note that the star image is partially transparent and is layered over the cat image.

HTML

<div>
    <p class="catsandstars">
        This paragraph is full of cats<br />and stars.
    </p>
    <p>This paragraph is not.</p>
    <p class="catsandstars">
        Here are more cats for you.<br />Look at them!
    </p>
    <p>And no more.</p>
</div>

CSS

pre, p {
    font-size: 1.5em;
    color: #FE7F88;
    background-color: transparent;
}

div {
  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}

p {
  background-image: none;
}

.catsandstars {
  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), 
                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-color: transparent;
}

Result

Note

Gli sviluppatori dovrebbero specificare la proprietà background-color, cioè un colore di sfondo che verrà mostrato se l'immagine non è disponibile. Le immagini di sfondo vengono mostrare sopra il colore di sfondo.

Specifiche

• CSS 1
• CSS 2.1
• CSS 3

Browser Compatibility

Vedi Anche

background