CSS Scroll-Parallax mit background-position?
Ich habe ein reiner Parallax-Effekt mittels CSS der auch genauso funktioniert wie er soll. Hierbei handelt es sich um ein einziges DIV mit Hintergrundbild:
<div id="h123_3" class="container-fluid parallax" style="height: 40vh; background-image: url(/bilder/bild1.jpg);"><a href="#h123_3" class="imageOpener btn btn-light btn-sm">Vergrößern</a></div>
Das CSS:
.parallax {
background-attachment: fixed;
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
box-shadow: inset 0px 0px 30px #444;
position: relative;
transition: all 0.5s ease;
}
Einzigstes Problem: Durch background attachment: fixed wird das Bild ja relativ zum Viewport, also an der oberste Bildkante, fixiert. Gibt es ein Trick/Workaround in dem ich es schaffe, dass background-position: bottom trotzdem funktioniert ohne den Parallax-Effekt (durch fixed) zu verlieren? Auch JS würde ich gerne weitgehenst verzichten.
Edit: Hab mich etwas falsch ausgedrückt. Ja background-position funktioniert. Nur das Parallax-DIV sitzt beim Laden der Seite am oberen Bildschirmrand. Dadurch wird trotzdem nur der größteil obere Bildausschnitt angezeigt.
2 Antworten
<!doctype html>
<title>fixed background</title>
<style>
body {
padding:40vH 0 0 0;
margin:0
}
#wrapper {
position:fixed;
height:40vH;
top:0;
left:0;
width:100%;
background-image: url(/bilder/bild1.jpg);
background-size:cover;
background-position:bottom;
z-index:10
}
#content {
position:relative;
z-index:20;
background-color:white;
}
</style>
<div id="wrapper"></div>
<div id="content">
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
...
</div>
Alex
Hallo Alex, danke! Nur hier bleibt ja das selbe Problem bestehen?!
Hier mal mein genaueres Problem:
https://jsfiddle.net/nmu6q5yw/
Der zweite Parallax Container klappt wunderbar, der Erste aber nicht, da das Bild ja am Viewport orientiert ist und nicht am DIV.
also bei mir funktioniert das tadellos , allerdings verstehe ichnicht warum du cover nimmst und dann aber bottom haben willst, hat dein html auch 100% hoehe etc ?
wenn ich bei mir background-size: auf 50% setze und position auf bottom, klebt es am unteren rand .
Cover sorgt ja dafür dass das DIV immer vom Bild ausgefüllt wird? Sprich das nie eine leere Fläche zu sehen ist. Aus dem Grund, da die Bilder unterschiedliche Dimensionen haben und zum anderen kann der User das Bild auch in voller Größe ansehen (auf 100vh).
Mein Problem liegt darin, dass auch ein Headerbild vorhanden ist welches als erstes auf der Seite angezeigt wird. Durch Fixed wird das Hintergrundbild am Viewport und nicht am DIV ausgerichtet. Wenn ich position: bottom benutze, wird es am unteren Viewport (in dem Fall bei 100vh) ausgerichtet und nicht an meinem DIV (also 40vh). Die Parallax Container mitten in der Seite funktionieren tadellos.