Div Höhe an Hintergrundbild anpassen

[KCH]

Servus! Habe in der Suche nix gefunden, deswegen hab ich mal n neues Thema erstellt.

Also ich habe eine Seite, die einen Hintergrund verwendet, der höher als 1px ist. Damit dieses Hintergrundbild im Footer "auslaufen" kann, Muss die Höhe von meinem Main-wrapper immer ein ganzzahliges Vielfaches von der Höhe des Hintergrunds sein.

Um das ganze n bissl anschaulicer zu machen: mal angenommen ich hätte Fußspuren als Hintergrundbild und die sollten dann im Footer quasi weggeblendet werden (also sie laufen woanders hin, oder es liegt n Farbverlauf drüber oder oder--- entscheidend ist jedenfalls im footer benutze ich eine andere Hintergrundgrafik). Da ich aber nicht möchte, dass die Fußabdrücke abgeschnitten dargestellt werden, muss der main-wrapper immer entweder 50 Pixel oder 100 Pixel oder 150 pixel oder... hoch sein (falls das Hintergrundbild 50 px hoch ist)....

Ist das irgendwie mit css zu realisieren?

 

[Maik]

Hi,

möglicherweise hilft dir hier die CSS-Eigenschaft padding-bottom für main-wrapper weiter, um einen unteren Innenabstand zu definieren.

Vielleicht ist es aber auch mit einer Mindesthöhe min-height für main-wrapper getan.

mfg Maik

 

[KCH]

Hi,

möglicherweise hilft dir hier die CSS-Eigenschaft padding-bottom für main-wrapper weiter, um einen unteren Innenabstand zu definieren.

Vielleicht ist es aber auch mit einer Mindesthöhe min-height für main-wrapper getan.

mfg Maik

Das Problem ist halt das der main-wrapper wächst und ich somit nicht sagen kann füge x pixel hinzu oder habe eine Größe von y Pixeln...

 

[Break]

Ich glaube das wird mit Css schwierig.... zur Not mit js..

 

[Maik]

Hast du ein Online-Beispiel zur Verfügung, wo man sich diesen Anwendungsfall mal näher betrachten kann?

Gut möglich, dass wir hier aneinander vorbeireden bzw. uns mißverstehen.

mfg Maik

 

[KCH]

Nee ne Website auf der ich das zeigen hab ich jetzt gerade leider nicht, aber ich hab mal schnell was zusammengeschnitten, damit ihr euch das ungefähr vorstellen könnt...

Also das Problem ist eben, dass der Mittelteil verschieden hoch sein kann, aber der Hintegrund (in diesem Fall die Fußspurenmuster) an einer bestimmten Stelle abschließen müssen, damit sie zum hintegrund des footers passen...

Bild hier

 

[Maik]

Moin,

eine "saubere" Umsetzung mit CSS wird sich hier in der Tat als schwierig erweisen.

Du könntest zwar die beiden Hintergrundbilder in einem vereinen, das eine sehr, sehr große Höhe besitzt, und dieses am unteren Elementrand positionieren (background-position:right bottom), damit der korrekte Übergang vom Fußstapfen zum Verlauf gegeben ist, aber dann würde der Fußstapfen am oberen Fensterrand "ungleichmäßig" beginnen.

mfg Maik