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!

Gibt es da echt keine möglichkeit?

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

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.

Also,

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

Code :

1 2 3

<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

Code :

1	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ß:
http://img90.imageshack.us/img90/990/xpl.png
Mehrfach repeated ergibt das http://img64.imageshack.us/i/xplp.png
Im Footer gibt es das bild dann auch http://img90.imageshack.us/img90/990/xpl.png, 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:
http://img854.imageshack.us/i/xpl.png/

Wie kann ich das verhindern?


Ich hoffe man versteht nun besser was ich möchte

MFG,
Cee

Hallo,

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

HTML-Code:

<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.

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

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 ;-(

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.

Code css:

1	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.

Code css:

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

Wird nicht totzdem abgeschnitten?

Zitat von Netzwerkidi

Wird nicht totzdem abgeschnitten?

Im Prinzip ja. Bei 1. wird es ganz oben abgeschnitten und bei 2. ganz unten. Aber der Übergang zwischen beiden ist immer sauber. Ich denke darauf kam es an.

Na, dann habe ich das falsch verstanden. Ich dachte, es sollte unten (oder oben, je nachdem wie man beginnt) immer vollständiges Background-image zu sehen sehen und der div genauso so hoch sein wie die komplett sichtbaren Backtground-images.

Also das Problem, dass er hat, ist der Übergang zwischen den beiden Divs. Er hat aber gefragt, wie die Größe des Div als vielfaches der Größe des Hintergrundes festlegen kann, da es eine Lösung für das Problem wäre. Ich hab also im Prinzip nicht seine Frage beantwortet, sondern für das gleiche Problem einen anderen Lösungsansatz vorgeschlagen.
Wir haben denke ich beide verstanden was er wollte, ich hab es nur anders beantwortet .

Warten wir mal ab, ob ihm meine Lösung ausreicht, ansonsten müssen wir zu JavaScript umsteigen (und könnte meine Lösung immer noch als Fallback benutzen).

Klingt schonmal interessant, Problem ist, zurzeit ist es mir gerade nicht möglich das zu testen, werde ich nachholen sobald es mir möglich ist.

Danke erstmal soweit

MFG,
Cee