Autor publikacji: Virtual Patriot - Administrator

background-attachment

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - background-attachment property (LV3)

Przeznaczenie 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.

Informacje dodatkowe: brak

Informacje techniczne 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: tak (animacja schodkowa)

Interpretacja właściwości `background-attachment`

tak

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

tak

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

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

scroll

Wyjaśnienie

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(https://webkod.pl/files/css/obrazek-01.png);
        width:300px;
        height:200px;
        overflow:auto;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </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

Wyjaśnienie

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;

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(https://webkod.pl/files/css/obrazek-01.png);
        background-attachment:fixed;
        width:300px;
        height:200px;
        overflow:auto;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </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

Wyjaśnienie

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;

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(https://webkod.pl/files/css/obrazek-01.png);
        background-attachment:local;
        width:300px;
        height:200px;
        overflow:auto;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </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

Wyjaśnienie

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;

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(https://webkod.pl/files/css/obrazek-o1.png), url(https://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:#7DCDE8;
      }
    </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>