Ostatnio edytowany:

background-image

Autor: Virtual Patriot

Opis właściwości background-image

Za pomocą właściwości background-image możemy określić, który obrazek powinien tworzyć tło obrazkowe interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości background-image

przeznaczenie
  • element HTML każdego typu
dziedziczenie
  • nie
wartość initial
wyjątki initial
  • brak
animowanie
  • nie

Interpretacja właściwości background-image

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Interpretuje wartość sekwencja, lecz od wersji "9".

Interpretuje wartość linear-gradient(), repeating-linear-gradient(), radial-gradient() oraz repeating-radial-gradient(), lecz od wersji "10".

Edge

tak

Opis wartości właściwości background-image

none

Opis

Wartość none jest domyślną wartością właściwości background-image.

Domyślnie żaden obrazek nie tworzy tła obrazkowego elementu HTML.

Przykład

żaden obrazek nie tworzy tła obrazkowego tego elementu HTML

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      żaden obrazek nie tworzy tła obrazkowego tego elementu HTML
    </div>

  </body>
</html>

url()

Opis

Za pomocą właściwości background-image oraz funkcji url() możemy określić, który obrazek powinien tworzyć tło obrazkowe interesującego nas elementu HTML.

Przykład

obrazkiem tworzącym tło obrazkowe tego elementu "div" jest obrazek znajdujący się pod adresem "http://webkod.pl/files/css/obrazek-01.png", ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "url()", w której to funkcji została użyta wartość "http://webkod.pl/files/css/obrazek-01.png"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-image:url(http://webkod.pl/files/css/obrazek-01.png);
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      obrazkiem tworzącym tło obrazkowe tego elementu "div" jest obrazek znajdujący się pod adresem "http://webkod.pl/files/css/obrazek-01.png", ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "url()", w której to funkcji została użyta wartość "http://webkod.pl/files/css/obrazek-01.png"
    </div>

  </body>
</html>

linear-gradient()

Opis

Za pomocą właściwości background-image oraz funkcji linear-gradient() możemy określić, jaki gradient liniowy powinien tworzyć tło obrazkowe interesującego nas elementu HTML.

Przykład

obrazkiem tworzącym tło obrazkowe tego elementu "div" jest obrazek w postaci gradientu liniowego, ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "linear-gradient()", w której to funkcji zostały użyte następujące wartości: "gold, green"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-image:linear-gradient(gold, green);
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      obrazkiem tworzącym tło obrazkowe tego elementu "div" jest obrazek w postaci gradientu liniowego, ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "linear-gradient()", w której to funkcji zostały użyte następujące wartości: "gold, green"
    </div>

  </body>
</html>

repeating-linear-gradient()

Opis

Za pomocą właściwości background-image oraz funkcji repeating-linear-gradient() możemy określić, jaki powtarzający się gradient liniowy powinien tworzyć tło obrazkowe interesującego nas elementu HTML.

Przykład

obrazkiem tworzącym tło obrazkowe tego elementu "div" jest obrazek w postaci powtarzającego się gradientu liniowego, ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "repeating-linear-gradient()", w której to funkcji zostały użyte następujące wartości: "gold 0%, green 12.5%, gold 25%"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-image:repeating-linear-gradient(gold 0%, green 12.5%, gold 25%);
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      obrazkiem tworzącym tło obrazkowe tego elementu "div" jest obrazek w postaci powtarzającego się gradientu liniowego, ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "repeating-linear-gradient()", w której to funkcji zostały użyte następujące wartości: "gold 0%, green 12.5%, gold 25%"
    </div>

  </body>
</html>

radial-gradient()

Opis

Za pomocą właściwości background-image oraz funkcji radial-gradient() możemy określić, jaki gradient promienisty powinien tworzyć tło obrazkowe interesującego nas elementu HTML.

Przykład

obrazkiem tworzącym tło obrazkowe tego elementu "div" jest obrazek w postaci gradientu promienistego, ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "radial-gradient()", w której to funkcji zostały użyte następujące wartości: "gold, green"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-image:radial-gradient(gold, green);
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      obrazkiem tworzącym tło obrazkowe tego elementu "div" jest obrazek w postaci gradientu promienistego, ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "radial-gradient()", w której to funkcji zostały użyte następujące wartości: "gold, green"
    </div>

  </body>
</html>

repeating-radial-gradient()

Opis

Za pomocą właściwości background-image oraz funkcji repeating-radial-gradient() możemy określić, jaki powtarzający się gradient promienisty powinien tworzyć tło obrazkowe interesującego nas elementu HTML.

Przykład

obrazkiem tworzącym tło obrazkowe tego elementu "div" jest obrazek w postaci powtarzającego się gradientu promienistego, ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "repeating-radial-gradient()", w której to funkcji zostały użyte następujące wartości: "gold 0%, green 12.5%, gold 25%"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-image:repeating-radial-gradient(gold 0%, green 12.5%, gold 25%);
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      obrazkiem tworzącym tło obrazkowe tego elementu "div" jest obrazek w postaci powtarzającego się gradientu promienistego, ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "repeating-radial-gradient()", w której to funkcji zostały użyte następujące wartości: "gold 0%, green 12.5%, gold 25%"
    </div>

  </body>
</html>

sekwencja wartości

Opis

Za pomocą sekwencji kilku (oddzielonych od siebie znakiem przecinka) wartości należących do właściwości background-image możemy sprawić, że tło interesującego nas elementu HTML będzie składało się z kilku obrazków jednocześnie. Najbardziej na wierzchu będzie ten obrazek, który wskażemy jako pierwszy w naszym zapisie.

Podana przez nas sekwencja wartości właściwości "background-image" nie może zawierać wartości globalnych.

Przykład

ten element "div" posiada tło obrazkowe składające się z dwóch różnych obrazków jednocześnie (z obrazka w postaci gradientu liniowego oraz z obrazka znajdującego się pod adresem "http://webkod.pl/files/css/obrazek-01.png"), ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z następującą sekwencją wartości: "linear-gradient(orange, transparent), url(http://webkod.pl/files/css/obrazek-01.png)"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-image:linear-gradient(orange, transparent), url(http://webkod.pl/files/css/obrazek-01.png);
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      ten element "div" posiada tło obrazkowe składające się z dwóch różnych obrazków jednocześnie (z obrazka w postaci gradientu liniowego oraz z obrazka znajdującego się pod adresem "http://webkod.pl/files/css/obrazek-01.png"), ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z następującą sekwencją wartości: "linear-gradient(orange, transparent), url(http://webkod.pl/files/css/obrazek-01.png)"
    </div>

  </body>
</html>