FANDOM


Dobra! To już trzecia część Od technicznej strony, gdzie już na pewno napiszę o tłach obrazkowych! Możecie to potraktować jako prezent świąteczny czy coś.

Wstawianie samego tła obrazkowego nie jest niczym trudnym. Wystarczy wstawić coś takiego:

BODY.page-Użytkownik_Twoja_Nazwa {
background-image: url('adres_obrazka')
}

Gdzie zamiast adres_obrazka wstawiamy adres do pliku, który chcemy mieć jako tło. Przykładowo, https://vignette.wikia.nocookie.net/dzemozerca11/images/7/71/T%C5%82o.png/revision/latest?cb=20180610114607&path-prefix=pl to obrazek, który jest ogólnym tłem dla wiki. I tutaj chciałabym zwrócić uwagę na pewną bardzo ważną rzecz. Otóż, sama nazwa tego pliku to "Tło.png", jednak w adresie do wstawienia jest "T%C5%82o.png". Jest tak dlatego, że "ł" jest polskim znakiem, a one w adresach się zmieniają na różne dziwne znaczki (nie, nie wiem, czemu się tak dzieje, ale się tak dzieje i trzeba o tym wiedzieć).

Ach, i jeszcze może dam parę porad dotyczących dotarcia do adresu pliku, bo z doświadczenia wiem, że moglibyście mieć z tym problem.

Po pierwsze, lepiej używać adresów plików z Fandomu (tak, dałam za wygraną, przerzucę się ze słowa "wikia" na "fandom"). Dlatego na początek musicie się upewnić, czy plik, który chcecie mieć jako tło, jest przesłany na jakąś wiki (bo plik nie musi być koniecznie na Miraculum, możecie mieć obrazki np. na testowych wiki, według mnie jest to dosyć praktyczne rozwiązanie). Przy tym też wypadałoby pamiętać o prawach autorskich, bo jeśli chcecie dać sobie na tło jakiś fan-art, to nie możecie go sobie ot tak wziąć, tylko najpierw musicie uzyskać zgodę autora na użycie.

Ale przejdźmy już dalej. Gdy macie przesłany plik, klikacie na niego. Pojawi się Wam najpewniej galeria obrazków. Wtedy klikacie na link z nazwą Waszego pliku. Powinna się Wam wtedy wyświetlić strona z plikiem i informacjami o nim, takimi jak jego historia, opis i licencja (tak, nawet do plików na tło trzeba dodawać licencje. Chyba że nie jesteście na ML, to róbcie sobie, co chcecie. Ale naruszenia praw nadal nie są w porządku). Pod plikiem powinien się wtedy znaleźć link "Pełna rozdzielczość". Klikacie go, a następnie kopiujecie z paska adresu wszystko, co się tam znajduje.

Poprawna metoda kopiowania:

  1. Wersja pierwsza:
    1. Klikacie prawym przyciskiem myszy adres. Powinien się zaznaczyć cały na niebiesko, a do tego powinno się pojawić okienko z różnymi zadaniami.
  2. Wersja druga:
    1. Klikacie na adres lewym przyciskiem myszy i kopiujecie adres za pomocą skrótu "ctrl+c".
  3. Potem krok wspólny dla obu wersji, czyli wklejacie adres tam, gdzie chcecie, za pomocą prawego przycisku myszy i polecenia "Wklej" lub skrótu "ctrl+v".
  4. Czego nie możecie zrobić:
    1. Adresu pliku nie możecie kopiować przez przeciągnięcie naciśniętej myszki przez adres, bo wtedy znaki polskie skopiują się Wam jako znaki polskie, a nie te dziwne znaczki, o których pisałam wcześniej. A wtedy mogą wyniknąć nieprzyjemne niespodzianki jak niedziałający kod, mimo że wszystko jest dobrze... W takich przypadkach też może się nie skopiować fragment adresu.

Czyli teraz czas na przykład dla pełnego zrozumienia.

BODY.page-Użytkownik_Dżemożerca11 {
background-image: url('https://vignette.wikia.nocookie.net/dzemozerca11/images/7/71/T%C5%82o.png/revision/latest?cb=20180610114607&path-prefix=pl')
}

Po użyciu tego kodu na profilu Dżemożercy11 znajdzie się tło wiki (czyli nic się nie zmieni, ale to tylko przykład).

Jednak po wstawieniu tego kodu nie uzyskamy wszystkiego, więc teraz czas na omówienie paru właściwości pomocniczych! Let's go!

background-repeatEdytuj

Domyślnie, jeśli tło jest za małe, żeby przykryć całe tło, będzie się powtarzać. Możemy to jednak zmienić, używając właściwości "background-repeat".

BODY.page-Użytkownik_Twoja_Nazwa {
background-repeat: wartość
}

Porównanie wszystkich wartości jest w tej uroczej tabelce:

width="100%" class="wikitable"
Kod Opis
BODY.page-Użytkownik_Twoja_Nazwa {
background-repeat: repeat
}
Powtarzanie tła w pionie i poziomie
BODY.page-Użytkownik_Twoja_Nazwa {
background-repeat: repeat-x
}
Powtarzanie tła tylko w poziomie
BODY.page-Użytkownik_Twoja_Nazwa {
background-repeat: repeat-y
}
Powtarzanie tła tylko w pionie
BODY.page-Użytkownik_Twoja_Nazwa {
background-repeat: no-repeat
}
Brak powtarzania tła
BODY.page-Użytkownik_Twoja_Nazwa {
background-repeat: round
}
Powtarzanie tła w pionie i poziomie oraz odpowiednie przeskalowanie tła, żeby pasowało do wielkości
BODY.page-Użytkownik_Twoja_Nazwa {
background-repeat: space
}
Powtarzanie tła w poziomie i pionie oraz rozmieszczenie tła tak, żeby się zmieściło

Wartości round i space nigdy nie używałam, więc nie mogę Wam powiedzieć, jakie według mnie są. I tak za najlepsze uważam no-repeat, ale do takiego tła potrzeba dużego pliku.

background-attachmentEdytuj

Po wstawieniu tła najczęściej dzieje się tak, że scrollując stronę, tło przesuwa się razem z nią. Jeśli chcemy to zmienić, trzeba nam użyć właściwości "background-attachment".

BODY.page-Użytkownik_Twoja_Nazwa {
background-repeat: wartość
}

Niestety, nie jestem w stanie Wam zbytnio pokazać, jak działa "background-attachment" w ramkach, bo na Fandomie nie da się wstawić tła obrazkowego do ramki, nie bawiąc się w klasy i inne takie. Dlatego dam Wam tylko parafrazy rzeczy z Webkodu i postaram się opisać, co to oznacza dla tła całej strony.

width="100%" class="wikitable"
Kod Opis
BODY.page-Użytkownik_Twoja_Nazwa {
background-repeat: scroll
}
Domyślna wartość, oznacza mniej-więcej tyle, że tło przesuwa się, jak scrollujemy całą stronę. Ale jeśli mielibyśmy ramkę o określonej wysokości i scrollowalibyśmy wewnątrz niej tylko jakiś tekst (bo całej ramki byśmy nie scrollowali), to tylko tekst by się przesuwał.
BODY.page-Użytkownik_Twoja_Nazwa {
background-repeat: fixed
}
Tło jest nieruchome względemw szystkiego. Jak scrollujemy stronę, ono jest nieruchome. I z tym można mieć ciekawy efekt. Jeśli do małej ramki dorzucimy tło "fixed", to jak będziemy scrollować całą stronę, to będzie to wyglądać, jakby w stronie była dziura. CHAMSKA REKLAMA ALERT! Taki efekt osiągnęłam np. tutaj.
BODY.page-Użytkownik_Twoja_Nazwa {
background-repeat: local
}
Czyli tło przyczepia się do tego, co jest nad nim. Podejrzewam, że tło całej strony przesuwa się wtedy z nią. A jeśli mamy ramkę, a w niej długi tekst, to przesuwa się razem ze scrollowaniem tekstu.

Według mnie najlepsze tło to "fixed", dlatego właśnie tego polecam Wam używać.

background-positionEdytuj

Tym razem pozycjonowanie obrazka. Oj, jak widać, sporo się już tutaj rozpisałam...

BODY.page-Użytkownik_Twoja_Nazwa {
background-position:poziomo pionowo
}
width="100%" class="wikitable"
Kod Opis
BODY.page-Użytkownik_Twoja_Nazwa {
background-position: left/right/center top/bottom/center
}
Wybieramy po jednym słowie z dwóch grup: "left/right/center" i "top/bottom/center". Określa nam to, jak tło ma być ułożone: po lewej/po prawej/w centrum i na górze/na dole/w centrum.
BODY.page-Użytkownik_Twoja_Nazwa {
background-position: 10px 10px
}
Wartości 10px są przykładowe. Pierwsza liczba oznacza oddalenie od lewego brzegu, a druga — od górnego. Mogą występować wartości ujemne (choć nie wiem, co dadzą).
BODY.page-Użytkownik_Twoja_Nazwa {
background-position: 20% 20%
}
Podobnie jak w przykładzie wyżej, wartości 20% są przykładowe. Oznaczają one też kolejno oddalenie od lewego brzegu i górnego. Mogą występować wartości ujemne (choć nie wiem, co dadzą).

Opisałam tylko podstawowe pozycje. Ich szczegółowy opis znajduje się tutaj.

background-sizeEdytuj

Ostatnią właściwość, bez której nie umiem się obyć, opisuje na końcu. Zaiste genialne.

BODY.page-Użytkownik_Twoja_Nazwa {
background-size: wartość
}
width="100%" class="wikitable"
Kod Opis
BODY.page-Użytkownik_Twoja_Nazwa {
background-size: auto
}
Rozmiar obrazka jest niezmieniony (jest taki, jaki rozmiar ma plik)
BODY.page-Użytkownik_Twoja_Nazwa {
background-size: cover
}
Przeskalowanie obrazka tak, żeby jego szerokość była taka sama jak szerokość strony.
BODY.page-Użytkownik_Twoja_Nazwa {
background-size: contain
}
Przeskalowanie obrazka tak, żeby jego wysokość była taka sama jak wysokość strony.
BODY.page-Użytkownik_Twoja_Nazwa {
background-size: 10px 10px
}
Rozmiar obrazka określamy za pomocą liczb. Najpierw podajemy szerokość, a potem wysokość. Wartości 10px są przykładowe.
BODY.page-Użytkownik_Twoja_Nazwa {
background-size: 10% 10%
}
Rozmiar obrazka określamy za pomocą procentów. Najpierw podajemy szerokość, a potem wysokość. Wartości 10% są przykładowe.

Uff! To już chyba wszystko. W razie pytań, uwag lub zauważenia jakichś błędów piszcie śmiało! Ja tymczasem już się będę zastanawiać, o czym pisać w następnym numerze, bo wreszcie skończyłam temat teł, który ciągnęłam już od niemal połowy roku.

Miłego kodowania!