wtorek, 20 listopada 2018

#18 - Rozszerzenie kodów do edycji tła

Hej, dołączyłam do tego bloga, by pomóc w udoskonalaniu strony, na której każdy z nas może się wyżyć w mniej lub bardziej kreatywny sposób. 
Jako pierwszy post chciałabym wam wrzucić rozszerzenie pierwszego posta dotyczącego edycji tła na stronie, ze względu na to, że każdy ma inny sposób na swoją stronę. :) 

Jeśli ktoś z was nie wie, o którym poście mówię to tutaj wam go wstawiam https://kreatywnime.blogspot.com/2018/10/1-poczatek-kody-na-to-profilu.html

Zacznijmy od powtarzania tła. Bazując na kodzie dodanym przez administratora możemy go zmodyfikować tak by stworzyć najbardziej nam odpowiadające tło strony. 
Istnieje kilka możliwości powtarzania tła 
repeat-x - tło jest powtarzane wzdłuż osi x (wszerz strony)
repeat-y - tło jest powtarzane wzdłuż osi y (wzdłuż wysokości strony)
no-repeat - tło nie jest powtarzane

Dla przykładu zamieszczam wam zdjęcie obrazujące jak wygląda powtarzanie wzdłuż osi x

Kod dla takiego wyglądu tła : 
body{background-image:url(link do obrazka);
background-attachment:fixed; background-position: bottom left;background-repeat: repeat-x;}

Oprócz tego w powyższym kodzie wyróżniłam też na zielono kolejną część rozszerzenia kodu - pozycjonowanie tła. Wyróżniamy: 
top left - lewy górny róg
top right - prawy górny róg
bottom left - lewy dolny róg
bottom right - prawy dolny róg

W ten sposób możecie pozycjonować swoje tło, ustawiać jego powtarzalność, dodatkowo łącząc z kodem na kolor tła, który znajdziecie w pierwszym poście tego bloga (podlinkowałam go wam wyżej) możecie uzyskać efekt jak poniżej: 
Do wybierania kolorów ja sama korzystałam ze stronki : https://html-color-codes.info/colors-from-image/

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}

Komentarze (0):

Prześlij komentarz

Subskrybuj Komentarze do posta [Atom]

<< Strona główna