Image overlapping parent div responsiveness - html

Question

What I'm trying to achieve is the image outside of the parent div's boundaries, which works in 1280x1024. How can I make this effect responsive?
Html:
<div class='row'>
<div class="divider">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 wow fadeInRight" data-wow-delay="1s" data-wow-duration="1.5s">
<img src="http://karsbarendrecht.nl/5/wp-content/uploads/2015/10/responsive.png" alt="laptop tablet phone responsive"/>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 wow fadeInRight" data-wow-delay="1s" data-wow-duration="1.5s">
<h1>bla bla bla.</h1>
</div>
</div>
</div>
CSS:
.divider{
margin-top:100px;
min-height:175px;
margin-bottom:100px;
background-size: cover!important;
background-attachment: scroll;
background-image: url('http://karsbarendrecht.nl/5/wp-content/uploads/2015/10/triangles.svg');
}
.divider div{
top:-50px;
The following image show's my problem, with the top half being the desired effect. And the bottom half is what happens when resizing the screen to smaller resolutions.

Answer 1

The problem seems to be that the image is resizing itself but the parent div is not, in this case I would change the values in pixels to values in vh and vw (these are percentages of "viewport height" and "veiwport width": the height and width of the window you are resizing.) for example:
margin-top:100px;
would become
margin-top:8vh;

Answer 2

By placing both the background image and the front image in HTML, and adding the following css rules they both scale the same.
.divider div{
top:-50px; // placing the image slightly above the divider div
height:125%; // making the div containing the image bigger than the divider div
}
.divider img{
width:100%; // just for this image because it isnt wide enough
position:absolute; // make sure the image listens to top:-50px;
}
ps: the images scale because of twitter bootstrap's css:
img {
height: auto;
max-width: 100%;
}