3 x background-image - nur wie?

[sph]

hallo leute!

also.. ich hab da ein (hoffentlich kleines) problem was hintergrundbilder und css betrifft - ich bekomm mein vorhaben nicht so ganz auf die reihe. ich denke aber dass das für den ein oder anderen hier kein problem darstellt, vielleicht hilft mir ja jemand auf die sprünge. es scheitert schon an der vorgehensweise, der logik, dem verstehen - dabei bräuchte ich quasi hilfe.

situation:

der hintergrund einer webseite soll durch grafiken aufgewertet werden. es handelt sich dabei um ein div, in dem sich später mal verschiedene inhalte befinden sollen, zb. gefloatete weitere divs, das ganze zwei-oder dreispaltig und vielleicht noch mehr kram.

das hintergrundbild soll für den gesamten bereich gelten. und: das hintergrundbild ist dreiteilig. und genau da liegt das problem.

man kann sich das vielleicht schlecht vorstellen, allerdings hab ich gerade nichts online, was ich vorzeigen könnte, ich geb mir mal mühe beim erklären:

-> der erste teil des hintergrundbilds ist der obere randabschluss. ein gif mit transparenten bereichen.

-> der zweite teil der grafik ist der mittelteil, der sich je nach content-menge nach unten wiederholen soll, (repeat-y).

-> der dritte teil des bildes ist der untere randabschnitt, ebenfalls wieder mit transparenz.

mein problem:

wie bekomme ich es hin das der obere und untere rand ohne repeat angezeigt werden, während der mittelteil genau bündig mit dem oberen randstück nach unten hin, bis zum unteren rand, das div füllt?

das ginge an sich schon, aber ich wollte das eigentlich irgendwie mit der folgenden bedingung erfüllen:

die angewandte methode soll ein zerstückeln der webseite in drei divs untereinander vermeiden, da der nachfolgende content sich über alle drei bereiche der hintergrundgrafik erstrecken soll - was sonst nur umständlich zu realisieren wäre.

meine gedanken dazu:

der einfachste weg wäre natürlich dieser:

  
<div id="oberer_rand">  
   ...  
</div>  
<div id="mittelteil">  
   ...  
</div>  
<div id="unterer_rand">  
   ...  
</div>  

allerdings hab ich dann richtig viel damit zu tun weitere inhalte und grafiken zu zerstückeln, da diese wie erwähnt über alle drei bereiche verteilt sein sollen. die randabschnitte sind mit über 100px höhe relativ groß, wenn ich meinen content auf das mittlere div beschränke bleiben da sehr häßliche - und viel zu große -  leerstellen...

zuletzt hab ich das so versucht:

  
<div id="mittelteil">  
   <div id="oberer_rand">  
      <div id="unterer_rand">  
  
         ...  
  
      </div>  
   </div>  
</div>  

damit (und der entsprechenden css-definition) hab ich meine ränder genau da wo ich sie haben will. allerdings liefert mir dann mein "mittelteil"-div unschöne ergebnisse.

wie erwähnt sind meine rand-grafiken transparent - was natürlich schlecht aussieht wenn dann der sich wiederholende mittelteil zum vorschein kommt, anstatt des normalen seitenhintergrunds darunter.

normalerweise könnte ich die hintergrund-position für den mittelteil so wählen dass nach oben hin abstand gelassen wird, und zwar exakt die höhe meines oberen randstücks. allerdings hat das bei meinen versuchen nicht funktioniert, ich hab mich noch nicht schlaugemacht ob das nun am repeat-y oder einem anderen fehler meinerseits liegt.

doch selbst wenn das so klappt - es würde auf jeden fall hinter dem unteren randstück zu sehen sein.

ziemlich vertrackt das ganze - ich hoffe ja sehr darauf dass ich da nur ne denkblokade hab. geht mein vorhaben überhaupt? ist das irgendwie vernünftig umsetzbar?

danke schonmal fürs lesen dieses doch etwas längeren posts - und auch danke im vorraus für alle hoffentlich folgenden und klärenden antworten :)

grüße & ein schönes wochenende,

sph

[RFZ]

wie bekomme ich es hin das der obere und untere rand ohne repeat angezeigt werden, während der mittelteil genau bündig mit dem oberen randstück nach unten hin, bis zum unteren rand, das div füllt?

Ok, mir ist dein Problem schon klar, aber trotzdem muss man für einen Lösungsansatz wirklich das Layout sehen können.
Eine Möglichkeit könnte die absolute Positionierung deiner beiden Abschlüsse innerhalb des Content-Elementes sein.
Eine andere wäre, die Elemente nacheinander folgen zu lassen, wie du es ja schon gemacht hast, aber sie zu überlagern.
Aber ich kann hier nur vermuten, für einen konkreten Ansatz würde ich das Layout brauchen.

[sph]

hallo!

du hast mich schonmal ungemein beruhigt - nämlich mit der vermutung dass das was ich will an sich, generell, grundsätzlich schon irgendwie zu bewerkstelligen ist :)

so, ich hab mal was online gestellt - ich glaube das ganze kann man auf vielerlei wege realisieren, ich hab die divs, in die mal der content soll, nur deswegen gefloatet weil ich so mit größenangaben, abständen und evtl. noch weiteren divs besser klarkomme.

allerdings musste ich auch meine umschließenden divs floaten, da diese sonst nicht über die komplette höhe des inhalts "aufgespannt" wurden.

du hast eine absolute positionierung erwähnt - wie verträgt sich das mit dem floating?

naja, hier jedenfalls der link:

http://5ph.5p.funpic.de/tmp/

der einfachkeit hier mal nur die relevanten codebereiche, als wa wären
html:

  
<div id="container">  
  <div id="content_bg_top">  
    <div id="content_bg_bottom">  
  
        <div id="left">  
  
                <!-- placeholder: left -->  
  
        </div>  
  
  
         <div id="right">  
  
                <!-- placeholder: right -->  
  
         </div>  
    </div>  
  </div>  
</div>  

und css:

  
#container {  
  float: left;  
  width: 840px;  
  margin: 0 0 0 30px;  
  background: url(../img/content_bg.gif) left top repeat-y;  
}  
* html #container {  
  margin: 0 0 0 15px;  
}  
#content_bg_top {  
  float: left;  
  margin: 0 0 0 0;  
  padding: 0 0 0 0;  
  background: url(../img/content_bg_top.gif) left top no-repeat;  
}  
#content_bg_bottom {  
  float: left;  
  margin: 0 0 0 0;  
  padding: 0 0 0 0;  
  background: url(../img/content_bg_bottom.gif) left bottom no-repeat;  
}  

soviel also dazu, ich glaube jetzt ist eindeutig welches problem ich lösen will. falls noch fragen offen sind - einfach melden, ich geb mein bestes um willige helfer zu unterstützen :)

ach ja - falls sich das jemand ansieht:
ich hab leider nicht die möglichkeit sämtliche browser und versionen zu testen. im firefox sollte alles so sein wie ich mir das vorstelle, für ie6 und ie7 sind css-hacks vorhanden (die ie7-hacks hab ich gerade erst angefügt, ich hoffe da beißt sich nix mit denen für ie6, ich kann das erst nächste woche wieder testen...). für opera wird erst später optimiert, ich denke das wird nicht all zu viel sein.

falls jemand andere browser - oder noch besser, andere betriebssysteme nutzt wäre ich für jeden hinweis auf eventuelle bugs dankbar! meine größte sorge ist dabei die zentrierte navigations-liste, gefolgt von den gefloateten divs....

besten dank & liebe grüße,

sph

ps: nicht von den verschobenen links in der navigation beirren lassen - da kommen mal grafiken hin ;)

[sph]

hm, mag mir niemand ein wenig helfen?

schade :\