Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Struktura dokumentu

Powtarzanie tła

Email Drukuj PDF

Tematy: kolor | kolor tła | grafika jako tło | powtarzanie tła | zaczepienie tła | pozycja tła | mieszane atrybuty tła

Dane w pigułce
Zastosowaniepowtarza ilustrację jako tło elementu
Dziedziczenienie
Wartościrepeat, repeat-x, repeat-y, no-repeat
Wartość domyślnarepeat
Przykładbackground-image: url(obrazek.gif); background-repeat: repeat-y
Uwagi
Odpowiednik w HTMLn.d.

Aby zdefiniować powtarzanie, należy wpisać w definicji stylu background-repeat : wartość

Polecenie powoduje powtarzanie w specyficzny sposób graficznego tła elementu. Jeśli element jest większy niż tło, powtarzanie pozwala go wypełnić powielanym wielokrotnie obrazem tła.

Tło elementu może się powtarzać tylko w pionie (repeat-y), tylko w poziomie (repeat-x), w obu kierunkach (repeat) lub nie powtarzać się w ogóle (no-repeat). Definiując np. w stylach ciało dokumentu (body), możemy podać następujące, przykładowe polecenie:

<style type="text/css">
<!--
body { background: #c0c0c0; url(greendot.gif);
background-repeat: repeat-y }
-->
</style>

Przykłady:

repeat-y | repeat-x | repeat | no-repeat

<table border width="400px">
<tr>
<td style="background-image: url(/grafika/greendot.gif); background-repeat:repeat-y;">Komórka tabeli z zieloną kropką jako tłem Komórka tabeli z zieloną kropką jako tłem Komórka tabeli z zieloną kropką jako tłem Komórka tabeli z zieloną kropką jako tłem </td>
</tr>
</table>
Komórka tabeli z zieloną kropką jako tłem Komórka tabeli z zieloną kropką jako tłem Komórka tabeli z zieloną kropką jako tłem Komórka tabeli z zieloną kropką jako tłem
Interpretacja: Internet Explorer, Firefox, Opera, Chrome

 

HTML5. Rusz głową.

HTML5. Rusz głową!

HTML5. Ćwiczenia praktyczne.

HTML5. Ćwiczenia praktyczne.

HTML5. Nieoficjalny podręcznik.

HTML5. Nieoficjalny podręcznik

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15465533