Aplikacje internetowe

Aplikacje internetowe CSS – kolory i obrazy tła

Kolor tła (background-color) Właściwość background-color pozwala zdefiniować kolor tła dla elementu. selektor {background-color: kolor} gdzie: • selektorem może być dowolny znacznik (X)HTML, • jako kolor należy podać definicję koloru. Wpisanie wartości transparent ustali tło przezroczyste. Oto przykład: <h2 style="background-color: yellow">Tytuł stopnia drugiego na żółtym tle</h2>

Grafika jako tło (background-image) Właściwość background-image pozwala zdefiniować obraz jako tło. selektor {background-image: url(adres_obrazka)} gdzie: • selektorem może być dowolny znacznik (X)HTML, • jakoadres_obrazkanależy podać miejsce, gdzie znajduje się obrazek, który chcemy wstawić jako tło. Wpisanie none usunie obrazek. Oto przykład: <h1 style="background-image: url(stars.jpg); color: white;">Tytuł stopnia pierwszego w kolorze białym z obrazkiem jako tło </h1>

Powtarzanie tła (background-repeat) Właściwość background-repeat pozwala określić, jak mają sąsiadować ze sobą obrazy. selektor {background-repeat: powtarzanie} gdzie: • selektorem może być praktycznie dowolny znacznik (X)HTML, • jako powtarzanie należy wpisać: • repeat- powtarzanie tła w obu kierunkach (domyślnie), • repeat-x - powtarzanie tła tylko w kierunku poziomym, wzdłuż osi X, • repeat-y - powtarzanie tła tylko w kierunku pionowym, wzdłuż osi Y, • no-repeat - brak powtarzania tła (zostanie wyświetlone jako pojedynczy obrazek).

Przykłady • repeat-x <div style="background-image: url(stars.jpg); background-repeat: repeat-x">zastosowanierepeat-x, czyli powtórzenie tła w poziomie</div> • repeat-y <div style="background-image:url(stars.jpg); background-repeat: repeat-y;">zastosowanierepeat-y, czyli powtórzenie tła w pionie</div>

Przykłady • repeat <div style="background-image: url(star.jpg); background-repeat: repeat; ">zastosowanie repeat, czyli powtórzenie tła na całej stronie</div> • no-repeat <div style="background-image: url(stars.jpg); background-repeat: no-repeat;">zastosowanieno-repeat, czyli powtórzenie nie powtarzanie tła</div>

Pozycja tła (background-position) Właściwość background-position służy do określania pozycji tła graficznego. selektor {background-position: pozycja} • gdzie: • selektorem może być znacznik (X)HTML wyświetlany w bloku albo zastępowalny, • jako pozycja należy wpisać: • Jedną wartość: • center - obrazek na środku (w centrum) • left - obrazek po lewej • right - po prawej • top - na górze • bottom - na dole • jednostka długości - odległość od lewej krawędzi

Pozycja tła (background-position) • Dwie wartości (oddzielone spacją): • left top - lewy-górny róg • leftbottom - lewy-dolny róg • right top - prawy-górny róg • rightbottom - prawy-dolny róg • Polecenie to ma sens, tylko jeśli określimy równocześnie tło obrazkowe oraz ograniczymy jego powtarzanie (no-repeat, repeat-x lub repeat-y).

Przykłady • Przykład zastosowania obrazka jako tła bez definiowania jego pozycji <div style="background: url(star.jpg); background-repeat: no-repeat; height: 50px;"></div> • Przykład zastosowania obrazka jako tła z określeniem jego pozycji w pionie background-position: top <div style="background:url(star.jpg); background-position: top; background-repeat: no-repeat; height: 50px;"></div>

Przykłady • Przykład zastosowania obrazka jako tła z określeniem jego pozycji w pionie background-position: center <div style="background: url(star.jpg); background-position: center; background-repeat: no-repeat; height: 50px;"></div> • Przykład zastosowania obrazka jako tła z określeniem jego pozycji w pionie background-position: bottom <div style="background: url(star.jpg); background-position: bottom; background-repeat: no-repeat; height: 50px;"></div>

Przykłady • Przykład zastosowania obrazka jako tła z określeniem jego pozycji w poziomie background-position: left <div style="background: url(star.jpg); background-position: left; background-repeat: no-repeat; height: 50px;"></div> • Przykład zastosowania obrazka jako tła z określeniem jego pozycji w poziomie background-position: right <div style="background: url(star.jpg); background-position: right; background-repeat: no-repeat; height: 50px;"></div>

Przykłady • Przykład zastosowania obrazka jako tła z określeniem jego pozycji w poziomie background-position: center <div style="background: url(star.jpg); background-position: center; background-repeat: no-repeat; height: 50px;"></div>

Przykłady • Możemy mieszać wartości pozycji pionowej i poziomejbackground-position: top right <div style="background: url(star.jpg); background-position: top right; background-repeat: no-repeat; height: 50px;"></div> • Możemy mieszać wartości pozycji pionowej i poziomejbackground-position: bottom left <div style="background: url(star.jpg); background-position: bottom left; background-repeat: no-repeat; height: 50px;"></div>

Przykłady • Możliwe jest wreszcie podanie wartości liczbowych. background-position: 2cm 1cm <div style="background: url(star.jpg); background-position: 2cm 1cm; background-repeat: no-repeat; height: 50px;"></div> • Możliwe jest wreszcie podanie wartości liczbowych. background-position: 70% 70% <div style="background: url(star.jpg); background-position: 70% 70%; background-repeat: no-repeat; height: 50px;"></div>

Atrybuty mieszane tła (background) Polecenie to pozwala w wygodny sposób zdefiniować wszystkie atrybuty tła. Nie musimy wypisywać kolejno wszystkich cech, a jedynie ich konkretne wartości. selektor {background: wartości atrybutów} gdzie: • selektorem może być dowolny znacznik (X)HTML, • jako wartości atrybutów należy wpisać konkretne wartości atrybutów dotyczących tła, które będą oddzielone od siebie spacjami (przy czy można niektóre pominąć). Są to: • kolor tła, • tło obrazkowe, • powtarzanie tła, • zaczepienie tła, • pozycja tła.

Przykład zastosowania: • <div style="color: green; background: url(pies.jpg) no-repeatleft top; padding:0px 0px 155px 155px;">To jest akapit z obrazkiem w tle. Obrazek ma podaną w nawiasie ścieżkę dostępu i nie jest powtarzany (no-repeat). Znajduje się po lewej stronie. Tekst pisany jest kolorem zielonym i jest oddalony od lewej krawędzi o 155px. Szerokość obrazka wynosi 150px. W przypadku gdybyśmy nie określili przesunięcia w prawo, tekst zaczynałby się standardowo przy lewej krawędzi.</div>

Aplikacje internetowe