Tło w CSS

Dla wartości background w CSS, która ustala nam tło co jest kurwa chyba zrozumiałe bo background to tło możemy nadać kilka właściwości:

    background-color

    background-image

    background-repeat

    background-attachment

    background-position

Jadąc po kolei background color to kolor tła danego elementu a raczej selektora który wybierzemy, na przykład body. O kolorach wspominałem w poprzednim poście więc nie będę niczego tutaj gadał już. Następne to background-image który nadaje nam tło z pliku z jakimś obrazkiem, składnia wygląda wtedy w ten sposób:

background-image url('obrazek.jpg') przy czym wewnątrz górnych przecinków, zapomniałem jak się nazywają trzeba podać adres URL obrazka chyba, że jest wrzucony razem ze stroną na serwer to należy podać do niego ścieżkę. Nie trzeba podawać ścieżki jeśli jest w tym samym folderze. Następna wartość to background-repeat dzięki której możemy sprawić że jak obrazek jest mniejszy to będzie go generować powtórnie. Jest to dobre bo strona szybciej się ładuje bo nie potrzeba tak dużej grafiki. Nie zawsze jednak się to da. W tej opcji możemy modyfikować czy ma powtarzać czy nie, i po której osi, na przykład tylko w dół lub w poziomie. A robimy to tak:

background-repeat: repeat-x/repeat-y/no-repeat

Zamiast nakurwiać zbyteczną ilość kodu warto zadbaćo higienę swoich plików. W tym celu istnieje coś takiego jak shorthand czyli napisanie wszystkich właściwości w jednej linijce, ważne tutaj jest zachowanie kolejności, może brakować niektórych rzeczy ale musi być po kolei, podaję przykład:

body {background:#ffffff url('img_tree.png') no-repeat right top;}

Zapomniałem jeszcze o background attachment. Będzie krótko: domyślna wartość to scroll wtedy tło przewija się razem z tekstem ale istnieje też opcja fixed i local. Fixed sprawia że obraz tła twardo stoi i nawet jak przewijamy to się nie rusza natomiast druga to jeszcze nie wiem.

Na koniec warto powiedzieć o background-position ponieważ ma dużo opcji do ustalenia gdzie ma być umiejscowione można słownie:

left top

left center

left bottom

right top

right center

right bottom

center top

center center

center bottom

można procentowo gdzie pierwsza wartość to poziom a druga wartość to pion. Wiadomo że od 0 do 100 i wiadomo że 0 i 0 to będzie na górze w lewym rogu.

x% y%

Można też użyć wartości pixelowej lub innych jednostek:

x[var] y[var]

Jest też interit ale to muszę jeszcze rozkminić.