Astroid Bild was nicht mitscrollt

Hallo zusammen,

ich bekomme es einfach nicht hin mit Astroid einen Fussbereich mit einem Bild zu versehen, was nicht mitscrollt und bei kleinen Bildschirmen mit schmaler wird...

Ich habe eine "Section" erstellt, darin habe ich ein Element vom Typ "image" erstellt. Dort habe ich dann das Bild ausgewählt und die benutzerdefinierte ID "footer-image" vergeben.

Astroid macht daraus diesen Quelltext:

<section class="astroid-section" id="f-6110f05dc728d01456035">
    <div class="astroid-row row no-gutters gx-0" id="ar-6110f05dc723f03709837">
        <div class="astroid-column col-lg-12 col-md-12 col-sm-12 col-12" id="ac-6110f05dc70fe073127107">
            <div class="astroid-image" id="footer-image">
                <div class="d-inline-block position-relative overflow-hidden">
                    <img src="/images/footer/footer.jpg" alt="Image">
                </div>
            </div>
        </div>
    </div>
</section>

Wie bekomme ich es hin, dass das Bild nicht mitscollt? Momentan wird das Bild bei Mobilgeräten auch leider so "niedrig", dass mann nichts mehr erkennt.

Übere einen Tipp würde ich mich sehr freuen

Hallo WM-Loose: Wenn ich in der Section kein Element habe und stattdessen direkt in der Section ein Hintergrundbild einstelle, kann ich dort ja das Attribut "Fix" auswählen.

Dann ist die Section allerdings im Frontend leer.

Ich glaube dasProblem ist, dass das Attribut "Fix" nur für Hintergrundbilder ausgewählt werden kann. Aber was ist dann das "Vordergrund-Element"?

Oder bin ich komplett auf dem Holzweg..?

WM-Loose: Vielen Dank, das war die Lösung!

<div style="height: 100vh;">
  &nbsp;
</div>

Kann man das ganze irgendwie so konfigurieren, dass das Bild sich an die Bildschirmbreite anpasst?

Hallo nochmal,

ich habe jetzt in der Section eine Modulposition angegeben.

Im Modul selbst habe ich nun das Bild und die Schräge darüber eingefügt.

<style>
.footer-shape {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.footer-shape svg {
    position: absolute;
    display: block;
    width: calc(100% + 1.3px);
    height: 10vw;
    transform: rotateY(180deg);
   
}

.footer-shape .shape-fill {
    fill: #fff;
}

.footer-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 20%, rgba(128, 0, 0, 1) 100%);
}
</style>

<div class="footer-shape">
    <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M1200 118L0 16.48 0 0 1200 0 1200 118z" class="shape-fill"></path>
    </svg>

<img src="../images/footer/footer.jpg" class="img-fluid">
<div class="footer-overlay"></div>
</div>

Mit der Bootstrap-Anweisung ist das Bild nun responsive. Das klappt schonmal

Hat jemand eine Idee, wie das Bild Fixed wird und sich unter die Schräge und den Rest der Seite schiebt?

Ich dachte, es sei mit einem angepassten Code aus #7 auf Modul-Ebene möglich.

Das es auf Astroid-Ebene schwierig wird, habe ich befürchtet. Es sei denn man trennt Schräge und Bild wieder auf zwei Module.