3. Wgrywanie tła bloga

Witajcie graficy! Tak jak obiecałem - notka o wgrywaniu tła bloga. Znam cztery sposoby, które zapewnię już gdzieś widzieliście. No cóż, prawie każdy blog graficzny takie coś oferuję i ja też skąd się tęgo uczyłem.

Sposób 1

Wchodzimy w Szablon > Dostosuj > Zaawansowane > Dodaj arkusz CSS. Zrobione? Myślę, że tak. Naszym selektorem będzie body. Odpowiada on za tło wszystkiego co mieści się w oknie przeglądarki, reasumując za cały blog. Deklaracją za to będzie background-image: url(LINK DO OBRAZKA). Tak ona wygląda, ponieważ tłumacząc to z angielskiego wyjdzie nam obrazek tła, no i link bezpośredni do niego. Całość wygląda tak:

body {background-image: url();}

Sposób 2

W tym wypadku zmieniamy wyłącznie selektor na .content-inner. Nie obejmuję on paska nawigacyjnego, którego w sumie nie lubię. Reszta pozostaje taka sama. Łatwe, prawda?

.content-inner {background-image: url();}   

 Sposób 3

Tym razem zagłębiamy się w HTML. Wyszukujemy frazę body {. Proponuję użyć "ctrl f". Wtedy w okienko wpisujemy "poszukiwaną frazę", a to co znajdziemy powinno wyglądać tak:

     <![CDATA[

          body {

            min-width: $(content.width);

          }

Tutaj również dodajemy poznaną przez nas deklaracje. Wygląda to tak:

      <![CDATA[

          body {

            min-width: $(content.width);

            background-image: url();

          }

Sposób 4

Wchodzimy w Szablon > Dostosuj >Tło. Wgrywamy jakikolwiek obrazek mieszczący się w limicie. Zapisujemy. Teraz odwiedzamy HTML. W okienko poszukiwania (zrobię o tym oddzielny post, ale było w sposobie 3) wpisujemy nazwę obrazka, u mnie 6.png. To sygnaturka z tego posta XD Odnaleziony tam link podmieniamy na dowolne tło. Proste?

 ~*~

A teraz to rozszerzmy, żeby miało ręce i nogi. Musimy dodać tłu kilka dodatkowych deklaracji. Nie działa to w sposobie czwartym, ponieważ tam zmian dokonujemy w Projektancie, w sekcji Tło.

Kolor:

Żeby dodać kolor pod obrazek wystarczy dopisać:

background-color: #b3b3b3;

 Dzięki temu, stworzymy ładne przejście między grafiką a resztą bloga.

Ruchome & Nieruchome:

Tak, a jak by tu zrobić by tło się nam ruszało? Wystarczy dopisać pod spodem to:

background-attachment: fixed;

A jak zrobić by wyglądało jak zwykły nagłówek? Zmieniamy fixed na scroll.

background-attachment: scroll;

 Rozmiar:

Jak na razie, wiem jak zrobić, by tło przybierało rozmiar monitora, wygląda to tak:

background-size: cover;

Pozycja:

Tło oczywiście możemy pozycjonować. Do góry, do lewej. Jak kto sobie wymarzy. Przykład:

background-position: top center;

A teraz jakie may pozycje:

top - do góry

left - do lewej

bottom - do dołu

right - do prawej

center top - do środka

Możliwości jest wiele, dlatego kombinujcie, bawcie się, łączcie.  

Powtarzanie:

Tło morzę się powtarzać. Najpierw przykład:

background-repeat: no-repeat;

Dostępne opcje:

no-repeat - bez powtarzania.

repeat-y - powtarzanie w pionie.

repeat-x - powtarzanie w poziomie

Przykład z mojego szablonu:

 body {
font: $(body.font);
color: $(body.text.color);
background-color: #b3b3b3;
background-image: url('http://img57.imageshack.us/img577/4474/j2ap.png');
background-attachment: fixed;
background-size: cover;
background-position: top center;
background-repeat: no-repeat;}

†††

To chyba wszystko XD Jeśli coś nie jasne, to proszę śmiało pytać. Hm... A teraz wam zdradzę, że ruszy tutaj nowy projekt zwany: "Gadżet pod lupą". Może niektórzy z was wiedzą, że każdy gadżet można dostosować, ponieważ ma on własne selektory. Na przykład lista blogów ma chyba sześć. A i może ktoś ma ochotę popracować w szabloniarni? Mamy otwarty nabór. Zapraszamy. Zna ktoś może program do filmowania pulpitu? Niedługo się przyda XD Mam sporo zamówień, więć nowy post może we wrześniu? Albo zrobię to o Liście blogów pod koniec siepnia, może być? 

Pozdrawiam ^^