search

pixelcog / parallax.js

Simple parallax scrolling effect inspired by Spotify.com implemented as a jQuery plugin
MIT License
3.54k stars 838 forks source link

css background-image - how use paralax? #93

Closed VadymVolos closed 8 years ago

VadymVolos commented 9 years ago

Hi!

style.css

.block-paralax-1 {
    height: 400px;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('https://pixabay.com/get/037b06d1609770b6bbeb/1447249830/cappuccino-756490_1920.jpg');
}

index.html

<div class="block-paralax-1 parallax-window" data-parallax="scroll" data-image-src="">
 <div>
  <h2>Text Center</h2>
 </div>
</div>
N3m3 commented 8 years ago

Got it finally work. You need a Wrapper with relative positioning and an inner div element with position absolute and z-index -101. Inside the wrapper and below the background div you can set the parallax div.

HTML:

<div class="wrapper">
    <div class="adding-background"></div>
    <div class="parallax-window" data-parallax="scroll" data-image-src="http://www.bilder-upload.eu/upload/e8cafb-1447932765.jpg"></div>
</div>

CSS:

.wrapper {
    position: relative;
}
.adding-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -101;
    height: 220px;
    background: rgb(248,197,91);
}
.parallax-window {
    height: 220px;
    background: transparent;
    width: 50%;
    margin: 0 auto;
}

See working fiddle: http://jsfiddle.net/5rnk6k2u/