kursy, tutoriale

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

Czas czytania: 3 minut

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.

Jakie właściwość CSS warto znać!

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

budowa obrazka – jak dodać obrazek do strony, web page

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://www.aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg');

Lub inna forma zapisu.

background-image: url("https://www.aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg");

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://www.aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg') repeat-x;

Lub inna forma zapisu

background-image: url("https://www.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://www.aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg') repeat-y;

Lub inna forma zapisu

background-image: url("https://www.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://www.aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg') no-repeat;

Lub inna forma zapisu

background-image: url("https://www.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://www.aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg') no-repeat #ccc;

Lub inna forma zapisu

background-image: url("https://www.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://www.aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg') no-repeat right 0;

lub inaczej

background-image: url("https://www.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://www.aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg') no-repeat bottom;

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://www.aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg') no-repeat bottom, 
url('https://www.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://www.aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg'), url('https://www.aurainweb.pl/wp-content/uploads/2012/11/ID-10017317-m.jpg');
background-repeat: no-repeat, no-repeat;
background-position: bottom, top left;

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://www.aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg') fixed;

Lub inna forma zapisu

background-image: url("https://www.aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg");
background-attachment: fixed;

Więcej -> Paralaksa

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://www.aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg'); 
background-size: auto;

Dostosowujemy do wielkości kontenera:
cover

background: url('https://www.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://www.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://www.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