Jak umieścić grafikę, zdjęcie w tle strony internetowej! [CSS]

kursy, tutoriale

Kategoria wpisu Kurs CSS, Kursy, Tło Tagi: , , , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

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:

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.

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.

W CSS zapiszemy to:

Lub inna forma zapisu, w tym konkretnym przypadku dająca dokładnie taki sam efekt.

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:

Lub inna forma zapisu

Powielający się obrazek na całą wysokość:

Analogicznie działa repeat-y tyle że w tym przypadku obrazek układa się pionowo.

Lub inna forma zapisu

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”.

Lub inna forma zapisu

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.

Lub inna forma zapisu

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:

lub inaczej

Nie powtarzający się obrazek u dołu:

Jednoczenie 2 rożne obrazki

Dwa obrazki umieszczone w tle, ze znalezieniem tej metody miałam problem na polskich stronach.

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.

Lub inna forma zapisu

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

Dostosowujemy do wielkości kontenera:
cover


contain

Wielkość tła można również wyznaczyć liczbowo lub w procentach. W tym wypadku trzeba uważać bo można zniekształcić obrazki.

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 obrazka umieszczonego w tle strony.
dodawanie grafiki pod spodem, położenie obrazka w tle

Dodaj komentarz

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