CSS – Kolor tła.

Prezentacja na temat: "CSS – Kolor tła."— Zapis prezentacji:

1 CSS – Kolor tła

2 Kolor pierwszoplanowy: właściwość 'color'
h1 { color: #ff0000; } PRDZYKŁAD

3 Właściwość 'background-color'
body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804 PRZYKŁAD

4 Obrazki w tle [background-image]
butterfly.gif

5 Obrazki w tle [background-image]
body { background-color: #FFCC66; background-image: url („butterfly.gif”); } h1 { color: #990000; background-color: #FC9804; PRZYKŁAD

6 Powtarzanie obrazka w tle [background-repeat]
Polecenie Opis Przykład background-repeat: repeat-x Obrazek powtarza się w poziomie PRZYKŁAD background-repeat: repeat-y Obrazek powtarza się w pionie background-repeat: repeat Obrazek powtarza się w poziomie oraz pionie background-repeat: no-repeat Obrazek nie powtarza się

7 Powtarzanie obrazka w tle [background-repeat]
body { background-color: #FFCC66; background-image: url (”butterfly.gif”); background-repeat: no-repeat; } h1 { color: #990000; background-color: #FC9804; } PRZYKŁAD

8 Blokada obrazka w tle [background-attachment]
Polecenie Opis Przykład background-attachment: scroll Obrazek porusza się ze stroną - odblokowany PRZYKŁAD background-attachment: fixed Obrazek jest zablokowany

9 Blokada obrazka w tle [background-attachment]
body { background-color: #FFCC66; background-image: url (”butterfly.gif”); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: #990000; background-color: #FC9804; } PRZYKŁAD

10 Pozycja obrazka w tle [background-position]

11 Pozycja obrazka w tle [background-position]
Polecenie Opis Przykład background-position: 2cm 2cm Obrazek jest ustawiony 2 cm od lewej i 2 cm w dół PRZYKŁAD background-position: 50% 25% Obrazek jest ustawiony centralnie w poziomie i w jednej czwartej w pionie licząc od góry background-position: top right Obrazek jest ustawiony w górnym prawym rogu strony

12 Pozycja obrazka w tle [background-position]
body { background-color: #FFCC66; background-image: url (”butterfly.gif”); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1 { color: #990000; background-color: #FC9804; } PRZYKŁAD

13 Kompilacja [background]
body { background-color: #FFCC66; background-image: url (”butterfly.gif”); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } background: #FC9804 url (”butterfly.gif”) no-repeat fixed right bottom;

14 Kompilacja [background]
body { background: #FC9804 url (”butterfly.gif”) no-repeat; } Te dwie właściwości które nie zostały określone teraz ich wartości ustawią się standardowo które jak wiesz to: scroll oraz top left