Skocz do zawartości
Domiss

Lekcja 1 - Ustawianie Tła

Polecane posty

Domiss

Autorzy: DomissDEV

Wstęp: Witam w poradniku zajmiemy się głównie tłem i naszym zadaniem będzie zmienić tło na inny kolor bądź obrazek powtarzający się, to wszystko zależy co nam przyjdzie do głowy lecz ja pokażę wam wszystkie możliwości tła. Peace ;-)

Potrzebne Pliki:

• nazwastylu.css

Nasz Cel: W tym poradniku naszym celem będzie ustawienie tła forum.

Tutorial: Na początek otwieramy nasz css ( nazwastylu.css ) i na samym początku kodu powinien znajdować się nasz body ( czyli tło miejsca poza forum ). Usuwamy wszystko co jest pomiędzy ostrymi nawiasami aby zostało tylko takie coś:

body {


}
Więc teraz możemy zacząć działać. Zajmiemy się na razie tłem 1-dno kolorowym. Więc pomiędzy ostrymi nawiasami dodajemy nasze tło czyli:
background-color: #fff;
Tak więc mamy tło o kolorze białym, kolor możemy dowolnie zmienić zmieniając:
#fff
Na inny kolor, paletę kolorów przedstawiam tutaj: http://www.kurshtml.edu.pl/html/wykaz_kolorow,kolory.html Więc mamy już tło kolorowe, teraz zajmiemy się tłem obrazkowym. Więc po naszym:
background-color: #fff;
Dodajemy:
background-image: url(images/tlo.png);
Tym oto sposobem uzyskaliśmy tło obrazkowe gdzie obrazek powinien znajdować się w folderze /images stylu, o nazwie tlo z rozszerzeniem PNG. Obrazek będzie automatycznie się powtarzał. Możemy również ustawić w którą stronę ma się powtarzać czyli wystarczy pod:
background-image: url(images/tlo.png);
dodać:
background-repeat: repeat-x;
albo:
background-repeat: repeat-y;
Wyjaśnienie: repeat-x - powtarzanie tła tylko w kierunku poziomym repeat-y - powtarzanie tła tylko w kierunku pionowym. Dobra więc mamy już tło obrazkowe oraz z użyciem koloru. Kod Końcowy: CSS:
body {

background-color: #fff;

background-image: url(images/tlo.png);

}

Mowa Końcowa:

I tym oto sposobem zmieniliśmy tło naszego stylu. Zapraszam na moje kolejne poradniki i do zobaczenia DomissDEV

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
Gość
Temat jest zablokowany i nie można w nim pisać.
×
×
  • Utwórz nowe...