robos85
26.02.2009, 21:35:50
Otóż mam taki problem. Jako tło strony chcę zrobić cieniowane paski w pionie. Do pewnego momentu mają się cieniować a po tym mają już się powtarzać w tym samym kolorze.
Jak takie coś mogę uzyskać?
ayeo
26.02.2009, 21:38:00
Kod
body
{
background: #000 url( pasek.png ) repeat-x;
}
Mniej więcej tak
Pozdrawiam!
robos85
26.02.2009, 21:39:42
Prawie, bo koniec to też ma być jako obrazek a nie stały kolor:/
wookieb
26.02.2009, 21:41:40
Fajnie by było gdybyś zapodał taki obrazek tego co chcesz uzyskać.
ayeo
26.02.2009, 21:41:50
Źle Cię zrozumiałem. Jeżeli w pionie to większy kłopot. Najlepiej wytnij (1px wysokości) tło strony razem z paskami daj to do kontenera, a kontenerowi daj padding na szerokość pasków.
Pozdrawiam!
robos85
26.02.2009, 21:46:45

Mniej więcej takie coś, i od pewnego momentu w pionie będzie już stały kolor ale nadale ten wzorek pasków...
wookieb
26.02.2009, 22:00:52
W body ustawiasz tło (obrazek z paskami w jednolitym kolorze) powtarzalne na całym obszarze (repeat)
w to wstawiasz diva z tłem na wysokosc gradientu z repeatem w poziomie (repeat-y). Na początku może nie widać efektów wieć wstaw wysoką treść w div-a
robos85
26.02.2009, 22:04:30
a ten div ma mieć jakiś niski z-index lub coś? Bo jak nałożę na niego kolejne divy to chyba go zakryją?
Ew. czy dać mu pozycję absolutną?
ayeo
26.02.2009, 22:05:58
Pokombinuj, tak trudno sprawdzić?
wookieb
26.02.2009, 22:07:51
0 pozycjonowania absolutnego ani zadnych innych z-indexow.
Pewnie ze przykryja ale tylko wtedy jezeli dasz im jakis kolor. Jednak jak domniemam podane tło ktore chcesz uzyskać ma być ogólnym tlem strony. Wiec w srodku tego diva wstawiasz reszte kodu odpowiedzialnego za layout.
Jeżeli cie nei rozumiem to bij
wr0b3l
27.02.2009, 10:11:41
Możesz też jeszcze dodać:
background-attachment: fixed;
Wtedy tło nie będzie się przemieszczać przy przesuwaniu strony. Do tego dodaj jeszcze repeat-x, czy repeat-y.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę
kliknij tutaj.