podwójne tlo z dwóch plików graficznych Opcje

[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

[HTML] pobierz, plaintext 
<style>
.tlo1 {
 background: url('tlo.png') top repeat-x
 min-height: suma wysokości obu teł
}
.tlo2 {
 background: url('tlo2.png') bottom repeat-x
 min-height: 100%
}
</style>
<div class="tlo1">
  <div class="tlo2">
     tresc
  </div>
</div>
[HTML] pobierz, plaintext 

[shreker]

mam dokładnie tak:

[HTML] pobierz, plaintext 
<style>
.tlo1 {
     background: #56BB40 url('pasek.png') top repeat-x;
     min-height: 100%;
}
.tlo2 {
     background: url('trawa.png') bottom repeat-x;
     min-height: 100%;
}
</style>
<div class="tlo1">
  <div class="tlo2">
     tresc
  </div>
</div>
[HTML] pobierz, plaintext 

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

Ten post edytował shreker 25.09.2012, 18:55:37

[Damonsson]

Nie kombinuj z pustymi DIVami bo tak się tego nie robi tylko zrób jak Ci pisałem.

Na przykład:

[CSS] pobierz, plaintext 
html { 
    width: 100%;
    height: 100%;  
}
body { 
    width: 100%;
    height: 100%; 
    background: 
        url('http://forum.php.pl/style_images/nq.gif') repeat-x left bottom, 
        url('http://forum.php.pl/style_images/upgrade_ip/p_report.gif')
         ; 
}
[CSS] pobierz, plaintext 

Dla IE8,7,6 są różne fixy i hacki

Ten post edytował Damonsson 25.09.2012, 19:38:50

[lobopol]

Zamiast min-height: 100%; w tlo1 daj min-height: 200px