Hintergrundbild wiederholt sich nicht in y-Richtung

[Black Sunny]

Hallo,
ich habe auf meiner Seite eine senkrechte Trennlinie zwischen Text und Bild (siehe Bild). Diese wollte ich mit einer Grafik machen und diese so oft wiederholen, dass sie je nach Seitenlänge immer bis nach unten geht.
Bei meinem Hintergrund habe ich das schon gemacht, doch mit der Linie funktioniert es nicht.

im html:
<div id="trennlinie"></div>

im css:
#trennlinie
{
background-image:url("trennlinie.png");
background-repeat: repeat-y;
width:5px;
float:left;
padding:30px 0px 0px 15px;
}



wieso wiederholt sich die Linie nicht??
Danke

 

[prm]

Liegt wohl daran, dass der div #trennlinie weder Höhe noch Inhalt hat. Somit dürfte die Länge der Trennlinie den 30px padding-top entsprechen.

Wenn die Trennlinie über die ganze Seite gehen soll, dann weise sie am besten einem #wrapper zu, ähnlich wie hier bei Faux Columns beschrieben.

 

[Black Sunny]

naja der Inhalt is nur die Trennlinie also die Grafik. Da diese auf allen Seiten erscheinen soll hab ich sie in die css gesteckt.
So wie ich verstanden hab ist dieser wrapper ein container drumherum, oder?? wenn ja hab ich den in form von einem hauptcontainer welche im css so beschreiben ist:
#hauptcontainer
{
width:675px;
margin:0px 180px 190px;
}

die Höhe lege ich deswegen nicht fest, weil ja jede Seite eine unterschiedliche Höhe hat. ich will ja nicht, dass die eine dann viel leeren Platz hat.

da beim schreiben in dem "inhalt"container gleichzeitig die anderen container auf die Länge verändert werden müsste der "trennlinien" container ja auch diese Höhe haben. also wozu dann eine Höhe extra angeben??

 

[prm]

Um die Höhe flexibel dem Inhalt anzupassen, sollte kein height-Wert hinterlegt werden.
Du erreichst dein Ziel, wenn du die Grafik einem umhüllenden Container zuweist, der mit seinem Inhalt wächst. Ggf. die Grafik dann mit background-position positionieren.

 

[Black Sunny]

Ok gut, das funktioniert soweit.
Jetzt hab ich nur das Problem, dass die Bilder wieder ganz an den rechten Rand sollen und die Linie danebenliegen soll und nicht dahinter. Wie kann ich die Bilder verrücken ohne, dass sich der Hintergrund verrückt?

 

[mermshaus]

Ich denke, Code/Beispielseite wäre hilfreich.

 

[Black Sunny]

im html:
<div id="bilder">
<a href="nudeln5.jpg" rel="lightbox" title=""><img src="nudeln5.jpg" width="196" height="131" border="0" alt="">
<a href="nudeln3.jpg" rel="lightbox" title=""><img src="nudeln3.jpg" width="196" height="131" border="0" alt="">
<a href="nudeln4.jpg" rel="lightbox" title=""><img src="nudeln4.jpg" width="196" height="196" border="0" alt="">

</div>

die bilder sind die 3 bilder, die am rechten rand sind.

im css:
#bilder {
padding:30px 0px 0px 0px;
width:201px;
background-image:url("trennlinie.png");
background-repeat: repeat-y;
}

 

[Black Sunny]

sorry für den doppelpost.
ich habs jetzt. muss ja bloß das padding bissel bearbeiten.

danke