Ostatnio edytowany:

background-attachment

Autor: Virtual Patriot

Opis właściwości background-attachment

Za pomocą właściwości background-attachment możemy określić obszar, do którego powinien zostać zaczepiony obrazek tworzący tło obrazkowe interesującego nas elementu HTML.

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

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

nie

wartość initial

scroll

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości background-attachment

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

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

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

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

scroll

Opis

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

Domyślnie obrazek tworzący tło obrazkowe elementu HTML zaczepiony jest do obszaru tła tego elementu HTML.

Przykład

  background-attachment:scroll;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Obrazek tworzący tło obrazkowe przykładowego elementu "div" został zaczepiony do obszaru tła wspomnianego elementu "div".

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);
        width:300px;
        height:200px;
        overflow:auto;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

fixed

Opis

Za pomocą wartości fixed właściwości background-attachment możemy sprawić, że obrazek tworzący tło obrazkowe interesującego nas elementu HTML zostanie zaczepiony do obszaru tła okna przeglądarki internetowej.

Przykład

  background-attachment:fixed;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Obrazek tworzący tło obrazkowe przykładowego elementu "div" został zaczepiony do obszaru tła okna przeglądarki internetowej, ponieważ do wspomnianego elementu "div" została dodana właściwość "background-attachment" wraz z wartością "fixed".

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);
        background-attachment:fixed;
        width:300px;
        height:200px;
        overflow:auto;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

local

Opis

Za pomocą wartości local właściwości background-attachment możemy sprawić, że obrazek tworzący tło obrazkowe interesującego nas elementu HTML zostanie zaczepiony do obszaru zawartości tego elementu HTML.

Przykład

  background-attachment:local;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Obrazek tworzący tło obrazkowe przykładowego elementu "div" został zaczepiony do obszaru zawartości przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "background-attachment" wraz z wartością "local".

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);
        background-attachment:local;
        width:300px;
        height:200px;
        overflow:auto;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

sekwencja wartości

Opis

Jeżeli zdecydowaliśmy się na to, aby tło interesującego nas elementu HTML składało się z kilku obrazków jednocześnie, wtedy za pomocą sekwencji kilku oddzielonych od siebie znakiem przecinka wartości należących do właściwości background-attachment możemy określić osobne obszary, do których powinny zostać zaczepione poszczególne obrazki tworzące tło obrazkowe interesującego nas elementu HTML.

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

Jeżeli podana przez nas sekwencja wartości właściwości "background-attachment" będzie zawierała mniejszą liczbę wartości niż liczba obrazków tworzących tło obrazkowe elementu HTML, wtedy przeglądarka internetowa powtórzy podaną przez nas sekwencję wartości właściwości "background-attachment" tak, aby uzyskać wystarczającą liczbę wartości.

Przykład

  background-attachment:fixed, local;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Pierwszy obrazek tworzący tło obrazkowe przykładowego elementu "div" został zaczepiony do obszaru tła okna przeglądarki internetowej, natomiast drugi obrazek tworzący tło obrazkowe przykładowego elementu "div" został zaczepiony do obszaru zawartości przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "background-attachment" wraz z następującą sekwencją wartości: "fixed, local".

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-o1.png), url(http://webkod.pl/files/css/obrazek-o2.png);
        background-repeat:repeat-y, repeat;
        background-attachment:fixed, local;
        background-position:center, top left;
        background-size:25%, auto;
        width:300px;
        height:200px;
        overflow:auto;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>