Webmasterka


Tło na stronie CSS

img

Jest to kolejny artykuł z serii „css dla początkujących”. Tym razem pokażę jak zmienić kolor tła oraz jak wstawić powtarzające się tło (obrazek) na stronie. Aby wszystko w pełni funkcjonowało nie zapomnijmy o osadzeniu pliku style.css

1. Zmiana koloru tła strony. Wybieramy sobie dany kolor w postaci #HEX. Do tego celu możemy zajrzeć do poniższego linku:

plik style.css

html, body {
background-color: #000000; /* czarny kolor tła */
}

…………………………… . . . . .

2. Powtarzające się tło

plik style.css

html, body {
background-image:url(tlo.jpg); /* podajemy ścieżkę do tła */
background-repeat:repeat; /* ustawiamy powtarzanie */
}

Inne opcje:

  • reapeat-x; powtarzanie poziomo
  • repeat-y; powtarzanie pionowo
  • no-repeat; bez powtarzania

Weboholic: znajdziemy tutaj ciekawe tła

…………………………… . . . . .

3. Dwa tła na stronie

plik index.html

<div id="box1"></div>
<div id="box2"></div>

plik style.css

#box1 {
background-image:url(tlo.jpg);
background-repeat:repeat;
width:100px;
height:300px;
}
#box2 {
background-image:url(tlo2.jpg);
background-repeat:repeat;
width:200px;
height:100px;
}

Podgląd

About these ads

Dodaj komentarz

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Log Out / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Log Out / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Log Out / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Log Out / Zmień )

Connecting to %s


Obserwuj

Otrzymuj każdy nowy wpis na swoją skrzynkę e-mail.

%d bloggers like this: