Hintergund soll sich wiederholen passend zum content div

[Henna]

Hallo

Ich hab ein kleines Problem. Ich mache gerade eine Seite mit drei Div containern. Header(soll gleichzeitig auch Navi sein), content, und einen Footer. Nun möchte ich ein Hintergrundbild einfügen. Wenn ich ein festes  einzelnes nehme und das im Body einfüge dann bin ich ja nicht variabel. Ich hab also das Bild dreigeteilt, wobei der Mittelteil ein "Bildsampel" ist, dass oben und unten gleich ist. Nun meine Frage wie schaffe ich es, wenn der Seiteninhalt länger als das Mittel jpg (content.jpg) ist, sich dieses automatisch wiederholt? Und zwar so, dass es wieder bündig unten abschliesst?

CSS:

/* Randbereiche & Seitenhintergrund */
  body { background: #4d87c7 url("images/bg_blue.gif") repeat-x top left fixed; padding: 10px 0; }

/* Layout Alignment | Layout-Ausrichtung */
  #page_margins { margin: 0 auto; }

/* Layout Properties | Layout-Eigenschaften */
  #page_margins { width: auto;
    min-width: 760px;
    max-width: 760px;
    background: #fff; }
  #page { padding: 0 0 0 0;  }
  #header { height: 192px;
    padding: 0 0 0 0;
    color: #000;
    background: #fff url("images/navi.jpg"); }
  #main { margin: 0 0 0 0;
    background: #fff url("images/content.jpg") repeat-x top; min-height:100%; }
  #footer { height: 192px;
    padding: 0 0 0 0;
    color:#666;
    background: #f9f9f9 url("images/footer.jpg");  }

[bleicher]

Grüße,
das löst man AFAIK meist indem nur der repetierbare innelteil in den BG verpackt wird und der "rest" dann als 2 einzelne elemente platziert wird.
MFG
bleicher

[Henna]

Danke schon mal für die Antwort.

Könntest du mir evtl. auch einen code vorschlagen weil mit:
repeat-x top; min-height:100%; funktioniert das irgendwie nicht richtig.

Grüße Henna

Grüße,
das löst man AFAIK meist indem nur der repetierbare innelteil in den BG verpackt wird und der "rest" dann als 2 einzelne elemente platziert wird.
MFG
bleicher

[bleicher]

Grüße,

repeat-x top; min-height:100%; funktioniert das irgendwie nicht richtig.

O_o ich kann mir nicht mal vorstellen was diese zeilen bewirken sollten -

dein ziel war doch ein hintergrund der aus 3 teilen besteht - "kopf" , "mittelteil", und "fuß" - ich schlug dir vor , dass du nur den "mittelteil", der kachelbar ist in den body-bg packst, und "kopf" und "fuß" als normale bilder mit ggf. absoluter positionierung einbaust...

was hast du versucht?

MFG
bleicher

[Henna]

Hallo nochmal,

sorry war auch ein Erklärungsfehler meinerseits. Es muss ja erstens repeat-y
heissen wenn ich den bg nach unten wiederholen will.

So dann hab ich die page mal hoch geladen. http://www.code-red.info/test/index.html
Das Pinke ist der body, da kann ich ja kein bg rein stellen, da die anderen 3 div ja drüber liegen. Wie du siehst schliesst der mittlere bg nicht mit dem unterem ab.

#main {
    margin: 0 0 0 0;
    background: #fff url("images/content.jpg") repeat-y; }

Wenn ich folgende css Regel anwende schon.

#main {
    height: 664px;
    margin: 0 0 0 0;
    background: #fff url("images/content.jpg") repeat-y; }

Klar weil das Bild 332 px hoch ist, ich möchte aber, dass sich der Hintergrund eben automatisch passend wiederholt, denn ich weiss ja nicht was für Schriftarten oder spezielle Browsersettings potentielle Betrachter benutzen, dann schaut nämlich der Inhalt in den footer rein.

Ich hoffe das war jetzt nicht zu verwirrend. ;-)

Grüße Henna

Grüße,

repeat-x top; min-height:100%; funktioniert das irgendwie nicht richtig.

O_o ich kann mir nicht mal vorstellen was diese zeilen bewirken sollten -

dein ziel war doch ein hintergrund der aus 3 teilen besteht - "kopf" , "mittelteil", und "fuß" - ich schlug dir vor , dass du nur den "mittelteil", der kachelbar ist in den body-bg packst, und "kopf" und "fuß" als normale bilder mit ggf. absoluter positionierung einbaust...

was hast du versucht?

MFG
bleicher

[Malcolm Beck´s]

hi,

Ich hoffe das war jetzt nicht zu verwirrend. ;-)

Es geht. :) Das Problem hingegen etwas schwieriger, vielleicht hilft dir folgender Link.

http://d-graff.de/selfhtml/papier1.html

Übrigens, TOFU mag gekocht in verschiedenen Formen nach was schmecken, in einem Forum aber taugt es gar nichts.

grüße