Witam

Na samym początku dam pierw link do obrazka, aby było wiadomo o czym mówię.

http://edzu.pl/blok.jpg

Potrzebuje zaznaczony na obrazku div przesunąć na sam dół div'a wypełniającego.

A teraz kody:

[HTML] pobierz, plaintext 
 
<style>
// fragment css
.categoryBackgroundMain {
	width: 198px; background-image: url(../img/categoryBackgroundMain.jpg); background-repeat: repeat-y; clear: both;
}
 
.categoryBackgroundBottom {
	width: 198px; background-image: url(../img/categoryBackgroundBottom.jpg); background-repeat: no-repeat;
	position: static; overflow: auto;
}
</style>
 
<div class="categoryBackgroundMain">Jakaś tak nieznana treść
       <div class="categoryBackgroundBottom"><div>
</div>
 
[HTML] pobierz, plaintext 

Problem w tym że zaprzyjaźnionego grafika poniosło, i zrobił box z wypełnieniem graficznym (te ukośne pasy). Wypełnienie musi być zawsze na dole bloku. Wysokości są nieznane ponieważ treść generuje się dynamicznie.

I teraz pytanie:
Jak zrobić jeśli jest długa treść na górze było wypełnienie categoryBackgroundMain.jpg a na dole bloku categoryBackgroundBottom.jpg

Bardzo proszę o pomoc

Pozdrawiam

Position:relative dla nadrzędnego, position:absolute dla potomka i powinno działać.

Dzięki za odpowiedź ale jak dałem:

[HTML] pobierz, plaintext 
<style>
.categoryBackgroundMain {
	width: 198px; background-image: url(../img/categoryBackgroundMain.jpg); background-repeat: repeat-y; clear: both;
   position: relative; 
}
 
.categoryBackgroundBottom {
	width: 198px; background-image: url(../img/categoryBackgroundBottom.jpg); background-repeat: no-repeat;
	position: absolute; height: 204px;
}
</style>
 
<div class="categoryBackgroundMain">
       <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>dddddd<br><br><br>ddd
       <div class="categoryBackgroundBottom"></div>
 
 
</div>
[HTML] pobierz, plaintext 

to owszem categoryBackgroundBottom jest na dole ale bez treści, a potrzebuje aby treść kończyła się na categoryBackgroundBottom.



Pozdrawiam

No to wpisz dla danego selektora treść sama się nie wpiszę ;/

Przepraszam nie zauważyłem że źle napisałem tutaj kod.
Poprawny kod to:

[HTML] pobierz, plaintext 
<style>
.categoryBackgroundMain {
   width: 198px; background-image: url(../img/categoryBackgroundMain.jpg); background-repeat: repeat-y; clear: both;
}
 
.categoryBackgroundBottom {
  width: 198px; background-image: url(../img/categoryBackgroundBottom.jpg); background-repeat: no-repeat;
}
</style>
 
<div class="categoryBackgroundMain">
	     <div class="categoryBackgroundBottom"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>dddddd<br><br><br>ddd</div>
</div>
[HTML] pobierz, plaintext 

Obecnie <div class="categoryBackgroundBottom"> mam na górze box'u a potrzebuje aby poszedł na dół a na górze było wypełnienie class="categoryBackgroundMain"

Bardzo przepraszam za błędny kod na samym początku.

eee usuń te znaczniki <br>

No dobrze usunołem ale co to da.

<div class="categoryBackgroundMain">
<div class="categoryBackgroundBottom">
dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd
<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd
<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd
<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd</div>
</div>

Jakiś długi bardzo text, ale i tak nic nie zmienia, ponieważ dalej nie wiem jak opuścić class="categoryBackgroundBottom"

Pozdrawiam

Powinno być ok sprawdź

Niestety nie:
Brak wypełnienia, po zatym dolny blok przesuwa się z przewijaniem strony.

W miedzy czasie wykombinowałem taki kod:

[HTML] pobierz, plaintext 
<style>
.categoryBackgroundMain {
   width: 198px; background-image: url(../img/categoryBackgroundMain.jpg); background-repeat: repeat-y; clear: both;
}
 
.categoryBackgroundBottom {
  width: 198px; height: 204px; background-image: url(../img/categoryBackgroundBottom.jpg); background-repeat: no-repeat;
  margin-top: -180px;
}
</style>
 
<div class="categoryBackgroundMain">
          <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>dddddd<br><br><br>ddd
         <div class="categoryBackgroundBottom"></div>
</div>
 
[HTML] pobierz, plaintext 

co dało zamierzony efekt, ale jeśli blok jest krótki to ,,tło idzie w kosmos''.

Może jakieś inne rozwiązanie aby uzyskać taki efekt:
http://edzu.pl/blok2.jpg

Na szaro specjalnie na razie zrobiłem wypełnienie.

Ma ktoś jeszcze jakiś pomysł.

Pozdrawiam