Parallax effect within bootstrap grid

Question

Hello guys I'm trying to make simple parallax effect within bootstrap grid system and I've run into a problem. I made two divs side by side and I want one div to hold static image while other should have parallax effect.

I have a problem with parallax div background-size property no matter what I try I can't make it to cover my parallax div the way I want it, background image always end up being larger then it should be or not aligned correctly.

This is my code:

HTML:

<section id="twoImages" class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <div class="parallax"></div>
        </div>
        <div class="col-md-6">
            <img class="d-block img-fluid" src="https://placebear.com/715/470" alt="shoe newspaper">
        </div>
    </div>
</section>

CSS:

body {
    margin-bottom: 50em;
}

#twoImages {
    padding: 0;
    margin: 0;
}
#twoImages .col-md-6 {
    padding: 0;
    margin: 0;
}
#twoImages .parallax {
    /* The image used */
    background-image: url("https://placebear.com/715/470");
    /* Full height */
    height: 100%;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Here is the codepen so you can better understand my problem https://codepen.io/Karadjordje/pen/VpeBzp

@AjayBisht Thats the part that basically makes parallax effect — Zvezdas1989
– Zvezdas1989, Commented Mar 2, 2017 at 4:32
This may have been answered here stackoverflow.com/questions/21786272/… — Steve K
– Steve K, Commented Mar 2, 2017 at 4:33

Parth Jasani · Accepted Answer · 2017-03-02 07:11:16Z

3

Here is your answer

you need to use jquery

check this https://codepen.io/parthjasani/pen/YZwJMq

remove 
 background-attachment: fixed; 
from css

and add this jquery code

var $ = jQuery.noConflict()
$(window).scroll(function(){
  var scroll = $(this).scrollTop()
  $(".parallax").css({"background-position":"0px "+scroll/2+"px"})
})

answered Mar 2, 2017 at 7:11

Parth Jasani

2,4591 gold badge22 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Parallax effect within bootstrap grid

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related