Na początku każda strona internetowa posiada białe tło. To czy budując stronę zatrzymamy ten kolor lub czy go zmienimy zależy tylko od nas.
Witryna jednak tak naprawdę tylko taka się wydaje ponieważ domyślna wartość elementu <body> to background:#FFFFFF. Pozostałe elementy są tak naprawdę przezroczyste do momentu, aż nie dodamy im własnego tła.
Co możemy wykorzystać jako tło witryny internetowej
Tłem strony mogą być różne elementy takie jak:
- kolor,
- film,
- lub obrazek
Nieważne na jaki typ tła się zdecydujemy trzeba pamiętać o tym zrobić to z umiarem i głową. Tekst umieszczany na nim może stać się nieczytelny i rażący dla odwiedzających stronę. Kiepskiej jakości obrazy mogą też szpecić witrynę. Na uwadze warto mieć również, że istnieją rożne rozmiary monitorów i to co ładnie wygląda na małym nie koniecznie sprawdzi się na dużym i na odwrót. Dlatego ważne jest by przy wyborze grafiki zwrócić uwagę czy na pewno się ona nadaje.
Dzisiaj jednak zajmiemy się umieszczaniem grafiki w tle witryny. Istnieje kilka metod umieszczania grafiki jako tła strony. Poniżej postaram się przedstawić część z nich.
Jak zrobić tło strony w HTML?
Obecnie rzadko dodaje się kolor tła lub dodaje się grafikę w czystym HTML. W większości przypadków używa się CSS. Jest tak dlatego, że CSS daje nam dużo większe możliwości co do ustawiania tła. Z pomocą HTML możemy ustawiać np. jedynie kolor.
<div bgcolor="yellow"></div>Tę formę dodawania koloru stosuje się bardzo rzadko. Jest ona w praktyce średnio użyteczna i się od tego odchodzi. Nadaje się jedynie do prostego kolorowania np. tabel. Gdzie i tak wyższy priorytet będzie mieć CSS.
W HTML nie ma mowy o kilku kolorowym tle czy grafikach w tle. Wszystko to i wiele więcej daje nam CSS.
Dodawanie tła strony z CSS
Podstawową właściwością CSS dodającom tło do strony lub elementu HTML (np. <div>, <table>, <p>) jest właściwość background działa ona następująco np.
background: #CCC;Ta sama właściwość pozwala nam dodanie obrazu w tło:
background: url('https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg');Jeśli chcecie dowiedzieć się jak dodać Kolor tła na stronie internetowej w HTML dowiecie się więcej tutaj.
Ustawianie tła z CSS – metody
Istnieje kilka właściwości jakie warto znać przed przystąpieniem do dodawania obrazów w tle:
- background-image: url(adres obrazka);
- background-repeat: repeat-x | repeat-y | no-repeat;
- background-color: kolor jaki chcemy dodać;
- background-position: wartość liczbowa | right | left | top | bottom;
- background-size: auto|length|cover|contain|initial|inherit;
- background-attachment: scroll | fixed | inherit
Obrazy w tle dodajemy podobnie jak zwykły obrazek na stronie dlatego poniżej dorzucam wam poniższą grafikę.
Powielający się obrazek na całą stronę lub element (scroll – opcja domyślna):
Jak napisałam powyżej jest to domyślne ustawienie obrazka. W tym przypadku obrazek zostaje jak by sklonowany, wielokrotnie powielony przez co zajmuje całe tło elementu. Obrazek zajmie pozycję od lewego górnego lewego boku.
W CSS zapiszemy to:
background: url('https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg');Lub inna forma zapisu.
background-image: url("https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg");
Kod przykładu:
<div style="background: url('https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg'); height: 200px; width: 200px; border: 1px solid #ccc;"></div>Powielający się obrazek na całą szerokość:
Tym razem ograniczymy „klonowanie” grafiki tylko do poziomu – dzięki czemu otrzymamy coś w rodzaju paska. Do uzyskania efektu przyda nam się repeat-x. Opcja ta sprawia, że obrazek będzie jedynie powielony w osi X.
Skrócona wersja zapisu:
background: url('https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg') repeat-x;
Lub inna forma zapisu
background-image: url("https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg");
background-repeat: repeat-x;
Powielający się obrazek na całą wysokość:
Analogicznie działa repeat-y tyle że w tym przypadku obrazek układa się pionowo.
background: url('https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg') repeat-y;Lub inna forma zapisu
background-image: url("https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg");
background-repeat: repeat-y;
Nie powtarzający się obrazek:
Jeśli chcemy by grafika w tle pojawiła się tylko 1 raz dodajemy no-repeat. Co dosłownie znaczy „nie powtarzaj”.
background: url('https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg') no-repeat;Lub inna forma zapisu
background-image: url("https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg");
background-repeat: no-repeat;
Nie powtarzający się obrazek oraz nałożenie koloru:
Teraz coś troszkę trudniejszego. Wyświetlimy w tle nie tylko obrazek, ale także zmienimy kolor. W efekcie cała przestrzeń poza obrazkiem przybiera wybrany przez nas kolor.
background: url('https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg') no-repeat #ccc;Lub inna forma zapisu
background-image: url("https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg");
background-repeat: no-repeat;
background-color: #ccc;
Nie powtarzający się pojedynczy obrazek przesunięty na prawo:
Obrazek możemy też wyświetlić w innym miejscu niż górny lewy narożnik. W celu przesunięcia go w górny prawy narożnik przyda się nam kod:
background: url('https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg') no-repeat right 0;
lub inaczej
background-image: url("https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg");
background-repeat: no-repeat;
background-position: right top;Nie powtarzający się obrazek u dołu:
background: url('https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg') no-repeat bottom;Kod przykładu:
<div style="background: url('https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg') no-repeat bottom; height: 200px; width: 200px; border: 1px solid #ccc;"> </div>Jednoczenie 2 rożne obrazki (lub więcej)
Dwa obrazki umieszczone w tle, ze znalezieniem tej metody miałam problem na polskich stronach.
background: url('https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg') no-repeat bottom,
url('http://aurainweb.pl/wp-content/uploads/2012/11/ID-10017317-m.jpg') no-repeat;Inna forma zapisu dwóch obrazów umieszczonych w tle strony.
background-image: url('https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg'), url('http://aurainweb.pl/wp-content/uploads/2012/11/ID-10017317-m.jpg');
background-repeat: no-repeat, no-repeat;
background-position: bottom, top left;Kod przykładu:
<div style="background: url('https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg') no-repeat bottom, url('http://aurainweb.pl/wp-content/uploads/2012/11/ID-10017317-m.jpg') no-repeat; height: 200px; width: 200px; border: 1px solid #ccc;"> </div>Analogicznie możecie umieścić kilka obrazków w tle. Nazwę i cech każdego z nich umieszczamy po przecinku. To właśnie ten znak interpunkcyjny rozdziela kolejne obrazy.
Nieruchomy obrazek w tle
Kolejny przykład ustawienia tła strony wykorzystywany jest przy efekcie paralaksy na stronie. Podczas gdy będziemy przewijać (scrollować) stronę obrazek umieszczony w kontenerze będzie nieruchomy co da bardzo ciekawy efekt.
background: url('https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg') fixed;Lub inna forma zapisu
background-image: url("https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg");
background-attachment: fixed;
Rozciąganie tła – background-size
Kolejnym przykładem jaki chciałam zaprezentować jest obrazek w tle dostosowujący wielkości strony:
Domyślną wartością jest auto
background: url('https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg');
background-size: auto;Dostosowujemy do wielkości kontenera:
cover
background: url('https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg');
background-size: cover;Przy wymiarach: height: 200px; width: 200px;
Przy wymiarach: height: 200px; width: 300px;
contain
background: url('https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg');
background-size: contain;Przy wymiarach: height: 200px; width: 200px;
Przy wymiarach: height: height: 200px; width: 300px;
Wielkość tła można również wyznaczyć liczbowo lub w procentach. W tym wypadku trzeba uważać bo można zniekształcić obrazki.
background: url('https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg');
background-size: 50% 30%;Powyższe efekty można łączyć na różne sposoby.
Wszystkie kwadraty w przykładach posiadają wymiary 200px na 200px dodatkowo posiadają ramki.
Dodatkowe tagi:
pozycjonowanie, zmiana rozdzielczości obrazka umieszczonego w tle strony.
dodawanie grafiki pod spodem, położenie obrazka w tle