Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: podwójne tlo z dwóch plików graficznych
Forum PHP.pl > Forum > Po stronie przeglądarki
shreker
witam. mam pytanie odnośnie zrobienia tla z dwóch plików: pierwszy w postaci paska szerokości 1px powielany w poziomie (tworzy zasadnicze tlo, daje efekt gradientu), drugi plik w postaci grafiki na dole strony powielany w poziomie (tworzy na. efekt trawy).
o ile bez problemów daje się to zrobić przy użyciu jednolitego tla strony + trawy na dole, to jak to uzyskać przy pomocy dwóch plików graficznych?
Damonsson
multiple background
lobopol
Wyższe rozwiązanie nie działa w wielu przeglądarkach. Jeżeli nie jest to ważne to jak najbardziej polecam. Jednak gdy musimy wspierać ie8- to mamy sporo alternatyw
najprostsze dla wszystkich przeglądarek
  1. .tlo1 {
  2. background: url('tlo.png') top repeat-x
  3. min-height: suma wysokości obu teł
  4. }
  5. .tlo2 {
  6. background: url('tlo2.png') bottom repeat-x
  7. min-height: 100%
  8. }
  9. <div class="tlo1">
  10. <div class="tlo2">
  11. tresc
  12. </div>
  13. </div>


shreker
mam dokładnie tak:
  1. .tlo1 {
  2. background: #56BB40 url('pasek.png') top repeat-x;
  3. min-height: 100%;
  4. }
  5. .tlo2 {
  6. background: url('trawa.png') bottom repeat-x;
  7. min-height: 100%;
  8. }
  9. <div class="tlo1">
  10. <div class="tlo2">
  11. tresc
  12. </div>
  13. </div>


obecnie nie wyświetla mi sie nic oprócz tekstu na tle wąskiego paska (wysokości ok. 20px, na całą szerokość ekranu) pliku trawa.png.
nie wiem czy się dobrze zrozumieliśmy, chodziło mi o to aby plik pasek tworzył gradient na całą szerokość i wysokość strony, a dodatkowo na tym gradiencie został na samym dole strony powielony (w poziomie) obrazek trawa.png.
testowałem na różnych przeglądarkach i wszędzie to samo
Damonsson
Nie kombinuj z pustymi DIVami bo tak się tego nie robi tylko zrób jak Ci pisałem.

Na przykład:
  1. html {
  2. width: 100%;
  3. height: 100%;
  4. }
  5. body {
  6. width: 100%;
  7. height: 100%;
  8. background:
  9. url('http://forum.php.pl/style_images/nq.gif') repeat-x left bottom,
  10. url('http://forum.php.pl/style_images/upgrade_ip/p_report.gif')
  11. ;
  12. }


Dla IE8,7,6 są różne fixy i hacki
lobopol
Zamiast min-height: 100%; w tlo1 daj min-height: 200px
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.