Tło

Tło

Mam nadzieję, że umiesz już wszystko co pokazałem Ci w poprzedniej lekcji. Jeżeli tak to Twoja strona na pewno wygląda coraz lepiej. Jednak gdyby się tak zastanowić to na pewno brakuje jeszcze czegoś. Fajnie by było gdyby nasz tekst umieścić na jakimśtle, tak żeby strona wyglądała jeszcze lepiej :)

HTML umożliwia nam ustalenie koloru lub obrazka jako tło strony. Jednak my potrzebujemy czegoś co umożliwi nam większe możliwości kontrolowania tła. Na szczęście CSS oferuje nam naprawdę duży wahlarz właściwości, które możemy bez żadnych kłopotów wykorzystać na naszej stronie.

Kolor tła

Aby tekst na stronie był czytelny należy użyć koloru tła, który będzie kontrastował z kolorem tekstu. Najlepszym połączeniem jest oczywiście białe tło i czarne litery. Odradzam wykorzystywanie różnych kolorowych tapet ze wzorkami, które zazwyczaj jedynie przeszkadzają w czytaniu.

Ciekawą możliwością CSS jest, nie tylko określanie tła całej strony, ale także jej poszczególnych elementów.

Aby określić tło używamy właściwości background-color a jako wartość przypisujemy dowolny kolor. Dla przykładu określimy tło dla akapitu (!) oraz całej strony:

P{background-color: #FFFFFF;}
BODY{background-color: red;}

No właśnie. CSS pozwala określić tło nawet dla fragmentu tekstu. Możliwości są ograniczone tylko przez Twoją wyobraźnię. Aby poćwiczyć zdefiniuj tło najpierw dla całej strony, później dla każdego z elementu (podobnie jak powyżej).

Właściwości tła

background-color Czyli kolor tła. Najczęściej określamy go za pomocą ogólnie przyjętych nazw (np. red) lub zapisu szesnastkowego (np. #FFFFFF).

background-image Tło to nie tylko sam kolor ale także obrazki. Aby wstawić jakiś obrazek w tle całej strony lub niektórych jej elementów wykorzystujemy tą właściwość. Wartościami może być none lub url(źródło obrazka).

background-repeat
Tej właściwości używamy, aby określić sposób powtarzania się tła. Wartości tego elementu to:

• repeat - pozwala na powtarzanie się obrazka jako tła
• no-repeat - obrazek nie jest powtarzany
• repeat-x - obrazek powtarzany jest poziomo
• repeat-y - obrazek powtarzany jest pionowo

  background-attachment (tylko IE)
  Przy pomocy tej właściwości możemy rozwiązać czasami denerwujący problem: czy tło ma się przesuwać wraz z tekstem czy ma być nieruchome? Właściwośc ta jest znana pod nazwą "znaku wodnego". Możemy ją zdefiniować używając wartości:

• scroll - tło będzie przesuwane wraz z tekstem
• fixed - tło nie będzie przesuwane

  background-position
  Możemy również określić położenie tła będącego obrazkiem. Właśnie do określenia położenia używamy właściwości background-position przypisując mu dowolną wartość:

• top
• bottom
• left
• right
• center
• dowolna długość podana w pikselach lub procentach. W ten sposób określamy odstęp obrazka według lewego górnego rogu dokumentu.

   

  Trochę praktyki

  Teraz wystarczy, że stworzysz dowolny dokument html. Używając rożnych właściwości tła, poćwicz to, co poznałeś dzisiaj. Pobaw się ze złożonymi formułami np.

   

  
  BODY {
  
   background-color:red; 
  
   background-image:url(.../.../nazwa.gif);
  
   background-repeat:no-repeat;
  
   background-attachment:scroll;
  
  }
  
  H1 { 
  
   background-color:FFCC00;
  
   background-position:30px 40px;
  
  }