Kurs HTML

Wprowadzenie: Tło a przewijanie

Właściwość background-attachment określa, czy obraz tła elementu jest **stały względem viewportu** (okna przeglądarki), czy też **przewija się wraz z zawartością elementu**.

Ma to kluczowe znaczenie dla efektów wizualnych, takich jak efekt paralaksy, oraz dla zachowania tła w elementach, które same mają mechanizm przewijania.

Wartości background-attachment

Właściwość background-attachment przyjmuje trzy główne wartości:

• scroll: (Domyślne) Obraz tła jest **przypięty do elementu** i **przewija się wraz z jego zawartością**. Jeśli sam element jest przewijalny (np. ma overflow: scroll;), tło będzie się przewijać razem z treścią wewnątrz tego elementu. Jeśli element nie jest przewijalny, ale strona jest, tło będzie się przewijać wraz z elementem na stronie.
• fixed: Obraz tła jest **przypięty do viewportu**. Oznacza to, że pozostaje on **nieruchomy** względem okna przeglądarki, nawet gdy strona lub zawartość elementu jest przewijana. Pozycja tła (background-position) jest wtedy obliczana względem viewportu, a nie elementu. Efekt ten jest często używany do tworzenia wrażenia głębi (paralaksa).
• local: Obraz tła jest **przypięty do zawartości elementu**. Oznacza to, że jeśli element ma mechanizm przewijania (np. overflow: scroll;), tło będzie się przewijać **razem z treścią wewnątrz tego elementu**. Różni się to od scroll, gdzie tło pozostaje nieruchome względem samego elementu (jego obramowania), a tylko treść się przesuwa.

<!-- Przykład dla fixed -->
<div class="parallax-section">
  <h2>Sekcja z tłem fixed</h2>
</div>
<div class="normal-content">
  <p>Normalna treść strony...</p>
</div>

<!-- Przykład dla local vs scroll -->
<div class="scrollable-box scroll-bg">
  <strong>background-attachment: scroll (domyślne)</strong><br>
  Dużo treści wewnątrz tego przewijalnego pudełka, aby pokazać, jak tło zachowuje się podczas przewijania. Zauważ, że tło pozostaje nieruchome względem pudełka.
</div>
<div class="scrollable-box local-bg">
  <strong>background-attachment: local</strong><br>
  Dużo treści wewnątrz tego przewijalnego pudełka, aby pokazać, jak tło zachowuje się podczas przewijania. Zauważ, że tło przewija się razem z treścią.
</div>Kopiuj

body {
    margin: 0;
}

.parallax-section {
  height: 400px;
  background-image: url("tlo-fixed.jpg");
  background-attachment: fixed; /* Kluczowa właściwość */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* Stylizacja tekstu dla widoczności */
  color: white;
  text-shadow: 2px 2px 4px black;
  display: flex; align-items: center; justify-content: center;
}

.normal-content {
  height: 500px; /* Aby strona była przewijalna */
  padding: 20px;
}

.scrollable-box {
  width: 300px;
  height: 150px;
  overflow: auto; /* Włącz przewijanie wewnątrz pudełka */
  border: 2px solid black;
  margin: 20px;
  padding: 10px;
  background-image: linear-gradient(to bottom right, lightblue, lightgreen);
  background-size: 30px 30px; /* Mały rozmiar, aby było widać przewijanie tła */
}

.scroll-bg {
  background-attachment: scroll; /* Domyślne */
}

.local-bg {
  background-attachment: local;
}
Kopiuj

W pierwszym przykładzie (fixed), obraz tlo-fixed.jpg pozostanie nieruchomy podczas przewijania strony, tworząc efekt paralaksy względem .normal-content.

W drugim przykładzie, porównując .scroll-bg i .local-bg, zauważysz, że w pierwszym pudełku gradientowe tło pozostaje nieruchome względem ramki pudełka podczas przewijania jego wewnętrznej treści. W drugim pudełku (local), gradientowe tło będzie się przesuwać w górę i w dół razem z przewijaną treścią.

Przypięcie wielu obrazów tła

Jeśli używasz wielu obrazów tła, możesz podać wiele wartości dla background-attachment, oddzielonych przecinkami. Każda wartość odpowiada obrazowi na tej samej pozycji w background-image.

.multi-bg-attachment {
  background-image: url("logo.png"), url("texture.png");
  background-repeat: no-repeat, repeat;
  background-position: center, top left;
  background-attachment: fixed, scroll; /* Logo przypięte do viewportu, tekstura przewija się z elementem */
  height: 300px;
  border: 1px solid red;
}Kopiuj