Tło w css

Tło w css

Tło dla elementu strony internetowej może być wypełnione kolorem lub obrazkiem. Obejmuje ono zawartość elementu, dopełnienie (padding) i brzeg (border). Nie obejmuje marginesu elementu (margin). W starszych wersjach IE tlo nie obejmowało też borderu.

Główne właściwości tła to:

  • background-color: kolor tła
  • background-image: obrazek jako tło
  • background-position: miejsce gdzie ustawia się tło
  • background-repeat: czy tło obrazkowe jest powtarzalne i jak
  • background-attachment: czy obrazek tła przewija się wraz ze stroną

background-color: white

Oznacza się nazwą koloru, numerem koloru, rgb. Można również oznaczyć kolor jako “transparent” czyli przezroczysty.

background-image: url(obrazek.jpg);

Wyznacza obrazek, który ma się wyświetlić jako tło. Jeśli obrazek nie będzie się powtarzał i nie obejmie całego elementu, wtedy pozostałe części będą albo puste albo wypełni je ustawiony przez nas kolor.

Ścieżka do obrazka jest względna do adresu arkusza stylów, dlatego jeśli obrazek jest w innym katalogu trzeba podać do niego ścieżkę np. url(../katalog/obrazek.jpg)

background-repeat: repeat;

Obrazek może się powtarzać w postaci kafelków obejmujących cały element. Może też powtarzać się w pionie lub w poziomie. Wtedy powtarza się w postaci rzędu lub kolumny. Jeśli obrazek powtarza się w pionie lub poziomie lub się nie powtarza trzeba wskazać jego pozycję, gdyż nie będzie on obejmował całego elementu.

  • background-repeat: repeat; – wartość domyślna, obrazek powtarza się tak że cały element jest pokryty kafelkami
  • background-repeat: no-repeat;  – obrazek się nie powtarza i pojawia się tylko raz
  • background-repeat: repeat-x;  – obrazek powtarza się w poziomie
  • background-repeat: repeat-y;  – obrazek powtarza się w pionie
  • background-repeat: inherit;  – element dziedziczy powtarzanie po elemencie rodzica

Css3 dodaje ciekawy element dopasowania kafelkowania do elementu. W zależności od wielkości obrazka kafelkowanie powoduje, że ostatni obrazek jest ucięty bo nie mieści się.

 

background-position

Ustawia gdzie obrazek będzie ustawiony, czyli podaje pozycję lewego górnego rogu obrazka w odniesieniu do lewego górnego rogu elementu.

  • space – pomiędzy obrazkami dodaje się przerwa tak aby kafelki równo się układały i nie było ucięcia ostatniego.
  • round – kafelkowane obrazki są skalowane tak aby pasowały wielkością do elementu

Podajemy 2 liczby w pixelach lub w procentach. Pierwsza liczba oznacza położenie w poziomie, druga w pionie.

  • background-position: 0 0  – domyślnie przylepione do lewego górnego rogu elementu
  • background-position: 50px 0 – przesunie obrazek w poziomie w prawo, czyli odsunie o 50px od lewego brzegu
  • background-position: -50px 0 – przesunie obrazek w poziomie w lewo. Wartość minusowa oznacza że obrazek wyjdzie o 50px w lewo za lewą krawędź obrazka
  • background-position: 0 50px – przesunie obrazek o 50px w dół od górnej krawędzi. Jeśli damy tu wartość minusową to obrazek posunie się do góry i wyjdzie za krawędz górną i ta jego część nie będzie widoczna

Położenie można określić słownie:

  • w poziomie: left, center, right
  • w pionie: top, center, bottom

Oznaczenia procentowe w poziomie czy w pionie będą oznaczały procent elementu czyli 0 oznacza początek elementu, 50% środek, a 100% koniec elementu.

Background-position używa się do efektów tzw. sprites czyli linków obrazkowych. Jeśli chcemy aby tło linku było obrazkiem i zmieniało się z chwilą najechania myszą. Możemy zrobić 4 obrazki dla każdej właściwości linku. A możemy też stworzyć 1 obrazek zawierający w sobie 4 obrazki sklejone ze sobą. Wtedy oznaczamy background-position dla każdej właściwości linku tak aby po najechaniu myszą tło się przesuwało tak aby pokazać odpowiedni fragment obrazka. Efekt ten przyspiesza ładowanie się strony gdyż ładuje się tylko jeden obrazek a nie 4.

background-attachement

Oznacza co dzieje się z tłem gdy strona jest przewijana. Przglądając stronę mamy jakby dwa elementy: stronę samą i view port czyli jakby okienko pod którym strona jest przewijana. View port jest nieruchomy, natomiast strona przewija się pod nim.

  • scroll – tło przewija się wraz z elementem
  • fixed – tło jest nieruchome i nie przewija się wraz ze stroną. Widać go tylko wtedy gdy widoczny jest jego rodzic.
  • inherit – dziedziczy po elemencie rodzica
  • background-attachment:local– obrazek przewija się wraz z przewijaniem elementu

Tło wielokrotne – kilka obrazków w tle

Obrazki umieszczamy kolejno oddzielone przecinkami. Pierwszy będzie na górze a pozostałe odpowiednio pod nim jako warstwy.
background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);

background-clip

Określa jakie części elementu są pokryte tłem

  • background-clip: border-box;
    tło pojawia się pod brzegiem
  • background-clip: padding-box;
    tło obejmuje padding ale nie zachodzi pod brzeg
  • background-clip: content-box;
    tło jest pod zawartością elementu ale nie wchodzi pod padding i border
  • background-clip: no-clip;
    właściwość domyślna, to samo co border-box czyli tło wlewa się pod wszystkie elementy

background-origin

Odnosi się po background-position i określa od którego miejsca background-position jest liczony

  • background-origin: border-box;
    background-position liczone jest od brzegu
  • background-origin: padding-box;
    background-position jest liczone od paddingu
  • background-origin: content-box;
    background-position jest liczone od zawartości

background-size

Bardzo przydatna właściwość pozwalająca rozciągnąć obrazek tak aby objął cały element. Jest to przydatne wtedy gdy obrazek tła jest mniejszy niż element. Możemy wtedy rozciągnąć obrazek tak aby wlał się pod całe tło.  Oczywiście obrazek może stać się nieostry gdy zwiększy się rozdzielczość.

  • background-size: contain;
    skaluje obrazek tak aby pasował do elementu. Obrazek zwiększy się (bez zniekształcenia) do szerokości elementu. Jeśli w pionie jest za krótki to zostanie puste miejsce
  • background-size: cover;
    obrazek rozciągnie się w pionie i poziomie do wielkości elementu bez zniekształceń czyli jesli jest za długi w pionie to jego fragment będzie zakryty.
  • background-size: 100px 100px;
    skaluje obrazek do podanych wielkości czyli obrazek może się zniekształcić
  • background-size: 50% 100%;
    skaluje obrazek procentowo według podanych wartości

background-break

  • Background-break: continuous; – właściwość domyślna, traktuje poszczególne części elementu jak jeden i tło jest pod nim
  • Background-break: bounding-box; – bierze pod uwagę miejsce pomiędzy boxami
  • Background-break: each-box; – traktuje każdy box osobno i umieszcza tło pod każdym elememtem osobno

 

artykuł na podstawie Smashing Magazine

7 Comments
  1. Widzę, że na blogu można znaleźć wiele wartościowych porad 🙂

  2. Bardzo dobry artykul dla poczatkujacych. Dziekujemy!

  3. Przyda się to na pewno moim początkującym studentom, z pewnością polecę Pani stronę 🙂 Prosto wytłumaczone 🙂

  4. fajnie opisane, ogólnie sporo porad do wykorzystania znalazłam na tym blogu, dziękuję! 🙂

  5. Bardzo dobre porady. Właśnie szykuję się do przebudowy mjego portalu.
    Teraz są wymagania żeby był responsywny i muszę się do tego przystosować.
    Nie mam pojęcia o Joomli ani Worpressie, napiszę to w zwykłym HTMLu, bo to najłatwiej.
    Tak sobie myślałem o Flexboxie, bo strony zbudowane tą techniką szybko się łładują.
    Co Pani o tym sądzi?

  6. Bardzo dobre porady. Właśnie szykuję się do przebudowy mojego portalu.
    Teraz są wymagania żeby był responsywny i muszę się do tego przystosować.
    Nie mam pojęcia o Joomli ani Worpressie, napiszę to w zwykłym HTMLu, bo to najłatwiej.
    Tak sobie myślałem o Flexboxie, bo strony zbudowane tą techniką szybko się ładują.
    Co Pani o tym sądzi?

Leave a reply

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

This site uses Akismet to reduce spam. Learn how your comment data is processed.