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

pozycja

dowolna

dziedziczenie

nie

wartość initial

none

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

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

  background-image:none;
ż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:#CBFFFF;
      }
    </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

  background-image:url(http://webkod.pl/files/css/obrazek-01.png);
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:#CBFFFF;
      }
    </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

  background-image:linear-gradient(gold, green);
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:#CBFFFF;
      }
    </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

  background-image:repeating-linear-gradient(gold 0%, green 12.5%, gold 25%);
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:#CBFFFF;
      }
    </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

  background-image:radial-gradient(gold, green);
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:#CBFFFF;
      }
    </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

  background-image:repeating-radial-gradient(gold 0%, green 12.5%, gold 25%);
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:#CBFFFF;
      }
    </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

  background-image:linear-gradient(orange, transparent), url(http://webkod.pl/files/css/obrazek-01.png);
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:#CBFFFF;
      }
    </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>