Witajcie kochani! Dzisiaj powiemy sobie o naszym tle w CSS. Warto znać szczegóły, a przede wszystkim działanie naszego background w stylach. Dzięki tej wiedzy i odrobinie wyobraźni można stworzyć bardzo ciekawe projekty. Krótki spis treści:
1. Skrócony zapis
2. Background-color
3. Background-image
4. Background-repeat
5. Background-attachment
6.Background-position
7.Background-origin
8.Background-clip
9.Background-size
10.Więcej niż jeden obraz w tle
11. Przykład praktyczny

Zaczynamy!

1. Pozwólcie, że będę używał liter bg jako skrótu:
background: bg-color|bg-image|bg-repeat|bg-attachment|bg-position;
Zamiast nazwy podajemy odpowiednie wartości lub opcje. Wszystko oddzielamy spacją i na końcu nie zapominamy o średniku. Np.

Możemy dowolnie pomijać wartości, których nie chcemy zmieniać (mają wartość domyślną), ale musimy pamiętać o kolejności.

W CSS3 zostały wprowadzone nowe style:
-background-clip
-background-origin
-background-size
-background-image (kilka obrazów)
Więcej o tych stylach w kolejnych punktach.

2. Background-color ustawia kolor tła np.
background-color: red;

Istnieje kilka sposobów definiowania kolorów:
a) rgb(255,255,255) – wartości od 0-255 w kolejności czerwony(red),zielony(green),niebieski(blue)
b) rgba(255,255,255,1) – podobnie jak wyżej, ostatnia wartość przyjmuje zakres 0-1 i oznacza przezroczystość, możemy też definiować ostatnią wartość za pomocą ułamków
c) angielska nazwa np. red
d) kod heksadecymalny (pełny lub skrócony) np. #1b3a6d lub #fff

Wartości możemy podawać również w % np. background: rgb(20%,40%,50%);
Pamiętajcie, że domyślnie background jest ustawiony na transparent.
background:transparent;

3. Background-image 

4.Background-repeat to ustawianie powtarzalności obrazka w tle. Przyjmuje parametry:
a) no-repeat – nie powtarzaj
b) repeat-x – powtarzaj wzdłuż osi X (poziomo), jeśli będzie za mało miejsca ucina obraz
c) repeat-y – powtarzaj wzdłuż osi Y (pionowo), jeśli będzie za mało miejsca ucina obraz
d) inherit – odziedzicz
e) space – powtarza elementy w dwóch płaszczyznach (X i Y), jeśli jest miejsce, aby powtórzyć cały nowy element (nie ucinając go) pry tym nie zmienia ich położenia
f) round – powtarza elementy w dwóch płaszczyznach (X i Y), jeśli jest miejsce, aby powtórzyć cały nowy element (nie ucinając go) przy tym wyśrodkowuje wszystkie elementy
g) repeat – powtarza elementy w dwóch płaszczyznach (X i Y), jeśli będzie za mało miejsca ucina obraz

5.Background-attachment

6.Background-position definiuje pozycję obrazka w tle. Przyjmuje parametry:
a) % – np. background-position: 50% 40%;
b) cm – np. background-position: 2cm 8cm;
c) top bottom right left center np. background-position: top left;

7. Background-origin określa punkt, w którym zaczyna się nasz obrazek:
a) border-box – zaczyna się od górnego lewego rogu ramki
b) border-padding – (domyślnie) ustawia się od lewego górnego rogu paddingu
c) content-box – ustawia się od lewego górnego rogu naszej zawartości (content)

8.Background-clip podobnie jak background-origin ustala położenie naszego tła względem ramki, paddingu lub zawartości, ale z taką różnicą, że odnosi się do background-color (ustala malowanie tła):
a) border-box – obszar tła kolorowany jest na zdefiniowany kolor od lewego górnego rogu ramki
b) border-padding – obszar tła kolorowany jest na zdefiniowany kolor od lewego górnego rogu paddingu
c) content-box – obszar tła kolorowany jest na zdefiniowany kolor od lewego górnego rogu contentu (zawartości)

9.Background-size

10. CSS3 wprowadził możliwość ustawiania większej ilości obrazów w tle. Definiujemy je:
– w wersji pojedynczej – background: url(“”), url(“”);
– w wersji skróconej: background: url(“kot.png”) no-repeat 20px 40px, url(“pies.jpg”) repeat-x 20px 30px;

11. Praktyczny przykład – wyżej co prawda były podane przykłady, natomiast ćwiczenia nigdy dość.

Zauważmy, że niektóre style nakładają się na siebie tzn. nie jest możliwe, aby były użyte przy tym samym obrazku w tle. Kolor nie jest potrzebny jeśli zdefiniujemy background-size na auto, ponieważ zawsze to obrazek będzie zajmował cały obszar.

Mam nadzieję, że przybliżyłem wam chociaż trochę ten temat. Po więcej szczegółów polecam dokumentację:
Dokumentacja MDN

Sebastian Mieszczańczyk

Studia: Wyższa Szkoła Ekonomii i Informatyki w Krakowie
Profil: “Informatyka i Ekonometria”
Specjalizacja: “Programowanie urządzeń mobilnych i aplikacji sieciowych”
Siatkówka (GeoVolley Team) na pozycji środkowego
Hobby:
Oprócz programowania i wszystkiego co z tym związane…
Filmy – od dawna pasjonuję się nie tylko oglądaniem filmów, ale także analizowaniem ich pod kątem stworzenia ( Mój link do filmweba) – w liceum dzięki profilowi z modułem filmowym mogłem wejść głębiej w szczegóły kadrów, ujęć itd.
Psychologia – niestety wciąż mam zbyt mało czasu na zagłębianie się w tą wiedzę 🙁