Forum PHP.pl > [CSS] Jedno tło za drugim

Pomoc - Szukaj - Użytkownicy - Kalendarz

Terrorizer

8.08.2014, 14:29:39

Chcę ustawić dwa tła.
Jedno, to zdjęcie widoczne od czubka strony, niepowtarzalne.
A drugie, to też zdjęcie, tylko że ma się powtarzać po osi y po całej długości strony, ale musi być pod tym pierwszym.

Najpierw próbowałem z-index, ale on podobno nie ma się dobrze z tłami.

Potem próbowałem tak jak poniżej, ale coś sprawiało, że oba tła znikały.

[HTML] pobierz, plaintext 
background-color:black;
background-image:url("../gfx/backgroundrep.jpg"), repeat-y;
background-image:url('../gfx/planet.jpg'), no-repeat;
[HTML] pobierz, plaintext

Potem zostawiłem samo tło i dodałem po całości dokumentu html diva o id="backrep" nadając mu background.

[HTML] pobierz, plaintext 
body{
background-color:black;
background-image:url('../gfx/planet.jpg');
background-repeat:no-repeat;
}
 
#backrep{
background-image:url("../gfx/backgroundrep.jpg");
background-repeat:repeat-y;
height:auto;
}
[HTML] pobierz, plaintext

Teraz natomiast backrep nie wyświetla się w ogóle. W momencie gdy jakiś cudem się wyświetli, pokrywa mi cały planet.jpg co bardzo mi jest nie na rękę.
Jak wyjść z sytuacji?

fate

8.08.2014, 14:55:46

Zaraz padniesz:

body{
background:black url('../gfx/planet.jpg') no-repeat, url("../gfx/backgroundrep.jpg") repeat-y;
}

Nie wczytywałem sie dokladnie ocb ale w razie czego zamień elementy za i przed przecinkiem

Terrorizer

8.08.2014, 15:00:36

Hmmm teraz nic się nie pokazuje

EDIT: wrzuciłem wszystko w validator i pokazało ,ze black nie jest poprawną wartością background.
Zrobiłem więc tak, natomiast ten black wciąż nie wskakuje, jak się za to zabrać?

[HTML] pobierz, plaintext 
background-color:black;
background: url('../gfx/planet.jpg') no-repeat, url("../gfx/backgroundrep.jpg") repeat-y;
}
[HTML] pobierz, plaintext

kujol

8.08.2014, 16:38:00

Najpierw chcesz tło w kolorze, a potem obrazkowe. Brany pod uwage jest zawsze ostatni background.

Inaczej jak tak sie nie da:

[HTML] pobierz, plaintext 
background: black, url('../gfx/planet.jpg') no-repeat, url("../gfx/backgroundrep.jpg") repeat-y;
[HTML] pobierz, plaintext

Terrorizer

8.08.2014, 16:50:11

No w ten sposób nie ukazuje się nic, próbowałem to dostowować na wiele sposobów.
Hmm no tak, ale jak ktoś odpala stronę na wielkim ekranie, to poza tymi obrazkami zobaczy biały ekran.. a on raczej powinien być czarny >,<
Może na <html> nałożyć czarny background?

trueblue

8.08.2014, 16:52:41

[HTML] pobierz, plaintext 
background:  url('../gfx/planet.jpg') no-repeat, url("../gfx/backgroundrep.jpg") repeat-y black;
[HTML] pobierz, plaintext

Terrorizer

8.08.2014, 16:57:35

Cytat

background: url('../gfx/planet.jpg') no-repeat, url("../gfx/backgroundrep.jpg") repeat-y black;

Bałem sie że w ten sposób black zakryje mi wszystkie obrazki i nawet nie wpadłem ,żeby tak zrobić ale działa zjebiście, dzięki

alex19

9.08.2014, 12:08:25

Podłączę się pod temat i zadam dodatkowe pytanie... czy taki zapis powoduje to że tła obrazkowe będą tylko jedno pod drugim? Czy da się osiągnać w ten sposb również efekt dwóch teł w poziomie, przy czym jedno takie jak jest, a drugie powtarzane?

trueblue

9.08.2014, 12:29:25

Tła można ustawiać dowolnie. Działa to identycznie jak zwykła właściwość background.
Tła mają nadawane coś w rodzaju z-index - pierwsze tło jest na wierzchu, kolejne na niższych warstwach.

alex19

9.08.2014, 12:36:29

Nie tak dawno szukałęm (tu na forum) rozwiązania podobnego problemu i nistety nikt mi takiego prostego rozwiązania nie podsunał

OK, mówisz pierwsze na wierzchu, a kolejne na innych warstwach... jak zrobić takie dwa przypadki:
Mamy dwie grafiki A i B o identycznych wymiarach 100x200px
1. Najpierw tło A (jeden raz), a obok niego powielone tło B
2. Najpierw tło A, a pod nim tło B - ani jedno ani drugie nie powielone

trueblue

9.08.2014, 12:43:30

http://jsfiddle.net/xtxjm4L8/
http://jsfiddle.net/xtxjm4L8/1/

alex19

9.08.2014, 15:39:44

Genialnie! Tej wiedzy mi właśnie brakowało.

Terrorizer

10.08.2014, 19:40:04

http://www.mutoplist.com
No właśnie taki sam efekt chciałem osiągnąć, jak kolega. No i się udało

Pierwsze tło raz, a potem drugie ciągnie się w nieskończoność

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.