DHTML0084

Rozdział 5.

Umiejscawianie* tła na ekranie

3Listing 5,6 - Microsoft Internet Exp!ot

pi> wiersz tabea,

wtmtbćh zwartych w taca Zfit.zpmttyoś górnego ?

wkfci. nmtpm* Wicntz i i**>

Umiejscawianie tła na ekranie

Obrazowi tła można nadać początkowe

położenie. Takie umiejscawianie może zostać wykorzystane dla elementów blokowych lub elementu, którego dokładny rozmiar jest znany (takich typu: obrazki, pola tekstowe, wielowierszowe pola tekstowe, listy lub obiekty) i pozwala na dowolne przesunięcie tła względem lewego górnego wierzchołka tych elementów.

Aby określić położenie grafiki tła

1. .body{

Podaj selektor, którego chcesz użyć.

W przykładzie przedstawionym na listingu 5.2 użyjemy selektora niezależnej klasy, która może zostać użyta do stworzenia tła przypominającego „znak wodny’' znacznika HTML-owego widocznego na ekranie.

2. background-color: #CC6666;

->background-image: url(../images/tlo1 .gif);

Aby umiejscowić obraz tła, będziesz musiał określić, gdzie się ten obraz znajduje. Pomocne jest także zdefiniowanie koloru tła, który zostanie użyty wszędzie tam, gdzie nie będzie wyświetlony obraz tła.

3. background-position:

Rozpocznij definicję zapisując nazwę właściwości i dwukropek.

łi Uptlipi

Umiejscowienie obrazu tła możesz podać liczbowo lub w postaci procentowej.

Podaj dwie wartości określające długość, oddzielone od siebie spacją. Pierwsza z tych wartości poda przeglądarce odległość obrazu tła od lewej krawędzi strony, natomiast druga - odległość od górnej krawędzi strony.

Listing 5.5a. Reguła dla klasy znaku wodnego jest określana w zewnętrznym pliku o nazwie ., Listing-5-5.css "...

.body (

back<jround-color: #CC666

background-image: url (. ./images/tlo.aif) ; background-position: 75px 75px;

}

Listing 5.5b. ...któryjest używany w tym dokumencie dzięki znacznikowi <LINK>...

<html>

<head>

cmeta http-equiv~"Content-Type" ->content="text/html; charset=ISO-8859-2^M> <title>Listing 5.Sb</title>

</head>

cbcdy bgcolor="#AACCCC">

<p ciass="body">W języku HTML definiuje się po kolei wszystkie wiersze tabeli, a każdy z wierszy zawiera definicję wszystkich zawartych w nim ... </p> </body>

</htn»l>

Kolumny obliczane są automatycznie w oparciu o liczb? rjajnS cazdym z wierszy Para znaczników TP. i /TR służy <ło Każdy wiersz ma komórki, które definiuje st? za znaćzników TD i /TD, zawartych mnodzy znacznikami przypadku komórek, nagłówka uiywamy znaczników TH

Zawitfełe It(,a6rek fti^lłwkśwjsst zwyWe

Jntmatt pogrubioną czcionką Podpisy tabel informuj*u tym

Rysunek 5.5. ... i wyświetlany na ekranie w oknie przeglądarki. Przesunięcia tworzą ładny obszar wzdłuż górnej i lewej krawędzi okna przeglądarki