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

Answer 1

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"})
})