kursy, tutoriale
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.
Tłem strony mogą być różne elementy takie jak:
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.
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.
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.
Istnieje kilka właściwości jakie warto znać przed przystąpieniem do dodawania obrazów w tle:
Obrazy w tle dodajemy podobnie jak zwykły obrazek na stronie dlatego poniżej dorzucam wam poniższą grafikę.
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%22;
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>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%22;
background-repeat: repeat-x;
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%22;
background-repeat: repeat-y;
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%22;
background-repeat: no-repeat;
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%22;
background-repeat: no-repeat;
background-color: #ccc;
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%22;
background-repeat: no-repeat;
background-position: right top;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>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.
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%22;
background-attachment: fixed;
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
Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…
Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…
Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…
Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…
Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…
Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…