Antworten auf deine Fragen:
Neues Thema erstellen

Erledigt - Footer mit überlappendem Hintergrund

CrazyPlaya

Noch nicht viel geschrieben

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:
testfooter1wklq.png


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

Noch nicht viel geschrieben

Achso so hab ich es als erstes mal probiert

HTML:
<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

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?
 

CrazyPlaya

Noch nicht viel geschrieben

@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

Noch nicht viel geschrieben

skizze1lk74.jpg


@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

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

Noch nicht viel geschrieben

@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

Nicht mehr ganz neu hier

@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 :D.
 

CrazyPlaya

Noch nicht viel geschrieben

Aber gerne doch ;)

HTML:
<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>
 

Myhar

Hat es drauf

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

Fotograf

Aber gerne doch ;)

HTML:
..............................
 
<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?
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben