Background element: element strony jako tło

W przerwie między świątecznymi porządkami, znalazłem trochę czasu na toby sklecić kilka zdań tak by przypominały wpis. Dziś z serii opowieści o CSS3 opiszę wartość element() dla właściwości background. Co to i z czym to się je? Zapraszam do lektury.

Co daje nam wartość element()

Wartość element() to wprowadzona w CSS3 wartość, rozszerzająca możliwości właściwości background, umożliwiająca ustawienie dowolnego elementu znajdującego się na stronie, jako tło innego elementu. Składnia jest niezwykle prosta:

background: element(#elementID);

Jako background ustawiamy element, i przekazujemy mu id elementu który ma być ustawiony jako tło. Proste, prawda? To jednak nie koniec. Wartość element() działa bardzo podobnie jak url(), co oznacza że możemy z powodzeniem stosować takie właściwości jak np. background-position, background-repeat a nawet background-size.

O czym jeszcze warto pamiętać używając element()?

  • Tło jest aktualnym odzwierciedleniem wykorzystanego elementu, co oznacza, że jeżeli w trakcie działania strony coś zmieni się w naszym elemencie, tło również ulegnie zmianie.
  • To tylko tło, więc nie ma sensu w nie klikać.
  • Jako tło możemy ustawić wszystko co mamy na stronie, nawet iframe, video czy canvas (canvas posiada dodatkowo własną wartość canvas())

Support

Zanim przedstawię proste demo i kilka przykładów zastosowań element(), wypadało by wspomnieć kto to wspiera. Tutaj jest blaaado. Na chwilę obecną tylko Firefox wspiera element(), gdzie musi być on poprzedzony prefixem -moz-. Więc, jeżeli interesują ciebie przykłady, które zaraz podam i nie masz jeszcze włączonej przeglądarki firefox, zrób to teraz.

Demo

Nie przygotowałem nic specjalnego, a bardziej szkielet, który pokazuje podstawowe możliwości i zachęca do dalszych eksperymentów.

<div id="el" contenteditable>Test</div>
<div class="test"></div>

Kod HTML, jak widać, jest niezwykle prosty. Mamy dwa divy, z czego pierwszy to element, który wykorzystamy jako tło drugiego. Jak widać dodałem jeszcze atrybut contenteditable tak by pokazać jak edycja wpływa na background element.

.test{
    background: -moz-element(#el) no-repeat 10px 10px;
    background-size: 1000px;
    width: 300px; height: 300px;
    border: 1px solid;
}

Jeżeli chodzi o CSS to najważniejsza jest pierwsza linijka gdzie jako tło ustawiamy div o identyfikatorze el, wyłączamy powtarzanie i pozycjonujemy je 10px od góry i od lewej.
Link do dema.

Przykłady

Nie starałem się na siłę wymyślić jakiś super demek (wiem, leniem jestem), jest jednak artykuł na hacks.mozilla.org, gdzie możecie znaleźć dużo więcej na temat -moz-element() wraz z fajnymi przykładami.

Podsumowanie

To było by chyba na tyle w temacie. Nie podejmuje się oceny przydatności, powiem tylko tyle, że prezentuje się ciekawie :). Inna sprawa, że specyfikacja może się jeszcze zmienić i nikt nie jest wstanie przewidzieć co będzie za jakiś czas. Zachęcam jednak do testowania.