Erledigt - Footer mit überlappendem Hintergrund

[CrazyPlaya]

Hi zusammen,

ich habe ein Image welches 400px hoch ist. Dieses möchte ich hinter ein am Ende der Seite positionierten Footer legen. Nun möchte ich das ganze aber so haben das der Footer am Ende der Seite bleibt. Das Image welches dahinter liegt soll aber den Bereich vor dem Footer schon überlappen.

Hier mal ein ein Bild zur Veranschaulichung:

Der schwarze Bereich ist das Image welche den Content Bereich überlappt, der rote Bereich ist der Footer.

Ich habe schon ein wenig mit Positions rumexperimentiert bekomme aber das Ergebnis nicht wie gewünscht hin.

Wenn euch noch Informationen fehlen dann einfach nachfragen.

Herzlichen Dank schon mal im voraus.

 

[CrazyPlaya]

Achso so hab ich es als erstes mal probiert

<style>
#footer {
    width: 100%;
    height: 250px;
    background: rgb(125,30,0);
    overflow: visible;
    position: relative;
}

#footer picture {
    position: absolute;
    height: 400px;
}

#footer-inner {
    position: absolute;
    height: 250px;
    z-index:1;
}
</style>

...

<main>
  <section></section>
  <section></section>
  <footer id="footer" role="doc-footnote">
     <picture>
       <source media="(min-width: 1920px)" srcset="img/footer.png">
       <img src="img/footer.png"  class="img-fluid">
    </picture>
    <div id="footer-inner"></div>
  </footer>
</main>

 

[MJayFux]

Also möchtest du dass der Footer sticky unten ist und das Image dann beim Scrollen hinter den fest positionierten Footer rutscht? Eventuell bis das hintere Image dann unten am Seitenende abschließt und sich nicht mehr scrollen lässt?

 

[lipsum media]

Hast Du es mal mit

#footer {
    width: 100%;
    height: 250px;
    background: rgb(125,30,0);
    overflow: visible;
    position: fixed;
    bottom: 0;
}

versucht?

Bei

Das Image welches dahinter liegt soll aber den Bereich vor dem Footer schon überlappen.

ist mir deine Intention nicht ganz klar.

 

[CrazyPlaya]

@Kiddo Ähnlich.das Bild soll halt auch schon am Footer sein. Ohne Scrolleffekt.

@wheelie86 Nein das habe ich so noch nicht probiert. Werde ich gleich mal testen.

Ich werde gleich mal versuchen eine bessere Darstellung zu zeichnen. Melde mich später noch mal

 

[CrazyPlaya]

@wheelie86: Hoffe mit dieser groben Skizze wird klarer was ich möchte.
Wie du siehst hat der Footer seine Höhe von z.B. 250px.
Das Image von diesem (also der rote Kasten) ist dann z.B. 400px hoch und soll dann den Footer überlappen, so das der obere Bereich des Bildes bis in den Content(main) Bereich hineinragt.
Der grüne Kasten davor ist dann noch mal eine DIV Box in welche man Text unterbringen kann.

 

[MJayFux]

Ja und was soll das bringen? Kannst doch gleich über den grünen Footer eine Imagefläche nehmen die einfach nur oberhalb platziert wird. Wenn kein Parallax vorhanden sein soll kann es dir doch eigentlich egal sein. Erschaffst du halt die Illusion davon. Merkt keiner ;-)

 

[CrazyPlaya]

@Kiddo Das Image ist halt nicht so flach wie hier dargestellt sondern eher bergig.
Der Hintergrund ist tranparent.
Die Sections wechseln die Farbe wie bei Spalten bspw.
Ich möchte halt das der transparente Teil welcher überlappt immer die Farbe der letzten Section hat.

 

[lipsum media]

@CrazyPlaya:

Guten Morgen,

Warum machst Du das dann nicht einfach sticky mit zusätzlichem z-index?

Also für den Footer z-index 0 oder auch negativ, für das Bild (roter Kasten) einen höheren z-index als für den Footer und für den grünen Kasten nochmal einen höheren z-index als für den roten.

Möglicherweise verstehe ich aber immer noch nicht, was Du erreichen willst und hab einen Denkfehler .

 

[CrazyPlaya]

@wheelie86 , @Kiddo
Vielen Dank für eure Unterstützung.

Hab es nun hinbekommen wie ich meinte.
@wheelie86 der Denkfehler lag dann doch eher bei mir

Wünsche ein geruhsames Wochenende

 

[MJayFux]

@CrazyPlaya Könntest du noch den Code veröffentlichen damit auch andere davon profitieren?

Danke

 

[CrazyPlaya]

Aber gerne doch

<style>
#footer {
    width: 100%;
    height: 250px;
    background: rgb(125,30,0);
    overflow: visible;
    position: relative;
    bottom: 0;
    z-index: 0;
}

#footer picture img {
    position: absolute;
    left:0;
    bottom: 0;
    height: 400px;
    width: 100%;
    z-index:1;
}

#footer-inner {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 250px;
    z-index:2;
}
</style>
 
...
 
<main>
  <section></section>
  <section></section>
   <footer id="footer" role="doc-footnote">
        <picture>
            <source media="(min-width: 1920px)" srcset="img/footer.png">
            <source media="(min-width: 1280px)" srcset="img/footer_1280.png">
            <source media="(min-width: 1024px)" srcset="img/footer_1024.png">
            <source media="(min-width: 600px)" srcset="img/footer_768.png">
            <source srcset="img/footer_320.png">
            <img src="img/footer_320.png"  class="img-fluid">
        </picture>
        <div id="footer-inner"></div>
    </footer>
  </footer>
</main>

 

[MJayFux]

Aber gerne doch

Thx!

 

[Myhar]

Es fehlt das alt-Attribut bei deinem Bild welches beschreibt was das Bild darstellt. Außer es ist nur deokorativer Natur, dann sollte es kein Bild sondern ein Hintergrund sein.

 

[Panobilder]

Aber gerne doch

..............................
 
<main>
  <section></section>
  <section></section>
   <footer id="footer" role="doc-footnote">
        <picture>
            <source media="(min-width: 1920px)" srcset="img/footer.png">
            <source media="(min-width: 1280px)" srcset="img/footer_1280.png">
            <source media="(min-width: 1024px)" srcset="img/footer_1024.png">
            <source media="(min-width: 600px)" srcset="img/footer_768.png">
            <source srcset="img/footer_320.png">
            <img src="img/footer_320.png"  class="img-fluid">
        </picture>
        <div id="footer-inner"></div>
    </footer>
  </footer>
</main>

MUSS da tatsächlich 2x das footer Ende </footer> stehen?

Ich bin aber nun echt gespannt, wie das Footerdesign in der fertigen Seite aussieht, stellst Du dann einen link ein?