Nakładające się na siebie tła przy przewijaniu strony w CSS3

Wpis na blogu

Kategoria wpisu Kurs CSS, Kursy, Tło Tagi: on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Już od kilku lat na rynku istnieje trend do budowania witryn internetowych w technologi one page. Wiele z tych stron podzielona jest na „sekcje” posiadające nieruchome tła. Czyli treść się przewija a tło pozostaje w miejscu do momentu gdy zastępuje je inne tło z kolejnej części strony. W tym wpisie chciałam pokazać jak uzyskać efekt takiego tła. Po części omówiłam już to wcześniej kiedy pokazywałam efekty jakie można uzyskać z tłem dzięki CSS3 we wpisie „UMIESZCZANIE GRAFIKI JAKO TŁA STRONY„. Tym razem pokaże jak użyć jednego z omówionych efektów w praktyce.

Demo

Jak zbudować taką stronę?

Dość istotną rolę odgrywa w tym przypadku CSS3.  A w szczególności

To właśnie ta zasada powoduje, że nasz obrazek będzie nieruchomy.

Dodając z kolei powyższą własność spowodujemy, że obrazek zostanie rozciągnięty na całą szerokość strony. Dzięki czemu będzie się lepiej wpasowywał w daną sekcję.

W moim przykładzie ustawiłam parametry następująco.

 

Dodajemy obrazki jako tło, pamiętajcie że to jak będą wyglądać zależy po części od tego jakie wymiary mają wasze obrazki:

Teraz wystarczy jeszcze stworzyć szkielet za pomocą HTML

W moim tutorialu pominęłam jak zapewne zauważyliście kilka funkcji HTML i CSS nie były mi one potrzebne dla tego projektu. Poniżej gotowy kod:

 

 

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *