background-image das repeat fixieren?

[CeeJay Magic]

Hallo Community!

Ich habe folgendes Problem:
Ich habe nun mittels background-image 3 <div> containern 3 verschiedene Hintergründe gegeben.

nun soll der mittelteil variabel-groß sein je nachdem wieviel Inhalt da ist.
Dabei soll jedoch immer um den wert wie das Bild hoch ist (8px) vergrößert werden, damit keine Bildfehler zum unteren Teil bilden. Soll heißen, dass wenn aufgrund der größe des Inhalts es nur 10 1/2 mal repeated wurde, dass es die div-höhe etwas höher macht so das das Bild dann 11 mal repeated wird.

Ich weiß auch nicht mit welchem Stichwort ich im Internet danach suchen kann weswegen die Suche leider erfolglos war.

Wie kann ich das einrichten?

Danke im vorraus!

 

[CeeJay Magic]

Gibt es da echt keine möglichkeit?

 

[CeeJay Magic]

Dieses Thema ist immernoch sehr aktuell. Wenn jemand eine Idee hat (selbst abwegig oder ohne CSS und mit JS & Co.), nur raus damit

 

[hela]

Hallo,

vermutlich ist dein Problem schlecht beschrieben, ich kann es auch nicht nachvollziehen.
Wie man Hintergrundbilder positioniert und fixiert wird hier gezeigt: http://www.css4you.de/backgroundproperty.html
Falls du damit nicht klar kommst, dann zeige hier am besten ein HTML-Minimalbeispiel oder einen Link zu deiner Problematik.

 

[CeeJay Magic]

Also,

Im grunde gibt es drei <DIV>-Container die untereinander liegen:

                <div class="class_div_Mid_Title">Header</div>
                <div class="class_div_Mid_main">Content</div>
                <div class="class_div_Mid_bot">Footer</div>

TITLE und BOT haben eine fixe größe nur der MAIN-teil ist halt variabel groß je nachdem was für ein Inhalt vorhanden ist.

Das heißt wenn ich nun ein Hintergrundbild einfüge und ihn mit

background-repeat: repeat-y;

repeate wird das Hintergrundbild dann soweit ausgefüllt wie der Inhalt groß ist.
Da das zu repeatende Bild ca. 8 pixel groß:

Mehrfach repeated ergibt das

Im Footer gibt es das bild dann auch

, wenn nun das Bild beim MAIN-Teil nur 9 1/2 mal wiederholt wurde weil der Content 76px hoch ist (9,5x8px=76px Content) (Also alles was weniger als das ganzzahlige mehrfache von 8px ist) und dann der FOOTER kommt sieht das ganze dann ziemlich blöd aus:

Wie kann ich das verhindern?


Ich hoffe man versteht nun besser was ich möchte

MFG,
Cee

 

[hela]

Hallo,

setze deine drei Container in ein "wrapper"-DIV-Block und gib diesem dann das Hintergrundbild:

<div style="width: 100px;
            background-image: url(http://img90.imageshack.us/img90/990/xpl.png);">
  <div class="class_div_Mid_Title">Header</div>
  <div class="class_div_Mid_main">Content</div>
  <div class="class_div_Mid_bot">Footer</div>
</div>

Die drei Container im "wrapper"-Block müssen dann natürlich einen transparenten Hintergrund haben.

 

[CeeJay Magic]

Danke für die Antwort,
Sie würde auch funktionieren,

aber leider hilft mir das nicht weiter, da das Bild unterhalb ausfaded also ins völlige weiß übergeht geht so das die gitternetzpunkte nicht mehr zu sehen sind. Es sind unterschiedliche Bilder.
Die Bilder die ich hier gezeigt habe dienten nur zur demonstration - gut, war meine
schuld in dem Moment. -.-

Kann man die größe eines automatisch (je nach Inhalt veränderten) DIV´s auslesen und gegebenenfalls auf die nächste sinnvolle größe ändern?
Ich vermute es geht dann in Richtung Javascript oder so.
Oder gibt es dann doch eine CSS-lösung? :/

MFG,
Cee

 

[Netzwerkidi]

Das geht wohl nur, in dem Du die Höhen von Div und Background-Image zur Laufzeit ausliest und dann die Div-Größe ggf. auf eine volle Anzahl Background-image-Höhen korrigierst.
Leider weiß ich nicht, wie man die Höhe eines Background-images ausliest ;-(

 

[CPoly]

Zwei Möglichkeiten fallen mir auf die schnelle ein.

1. Lass den Hintergrund des mittleren Div unten beginnen, dann passt der Übergang zum Footer auf jeden Fall zusammen.
Nachteil: das Hintergrundbild starten oben nicht bündig.

background-position:left bottom;

2. Positioniere beide Hintergründe fix. Dadurch starten sie alle relativ zum Fenster anstatt relativ zum Element selbst. Damit der Hintergrund oben bündig beginnt, kannst du ihn entsprechend so weit verschieben, wie dein Div vom Fensterrand entfernt ist.

background-attachment:fixed;
background-position:10px 75px;/*passend auswählen und für beide Element die gleichen Werte nehmen*/

 

[Netzwerkidi]

Wird nicht totzdem abgeschnitten?