Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

background-image

Podsumowanie

Własność background-image ustawia obrazek tła dla elementu.

Wartość początkowanone
Stosowana dowszystkich elementów. It also applies to ::first-letter and ::first-line.
Dziedziczonano
Mediavisual
Wartość wyliczonaas specified, but with URIs made absolute
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Składnia

background-image: uri | none | inherit

Wartości

uri 
Położenie zasobu obrazka używanego jako obrazek tła.
none 
Używane do wyszczególnienia, że dany element nie powinien mieć obrazka tła.

Przykłady

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

Uwagi

Twórcy powinni się upewnić, że określili background-color do użycia w przypadku, jeśli obrazek jest niedostępny. Obrazki tła są wyświetlane nad kolorem tła.

Specyfikacje

Zgodność z przeglądarką

Przeglądarki Najniższa wersja
Internet Explorer 4
Firefox 1
Netscape 4
Opera 3.5

Autorzy i etykiety dokumentu

 Autorzy tej strony: teoli, SphinxKnight, Witia, ethertank, Sennin, Mgjbot, Ptak82
 Ostatnia aktualizacja: teoli,