Background image animation

There’s some really cool image animation options for BoldGrid, like fade in, slide in, etc. The problem is that when I use these animations on the background image it treats the background and foreground elements all as one image, ie I can’t seem to get a nice moving background with still foreground images (unless I animate both in opposite directions but that’s a recipe for visual bugginess and is very limiting in animation options). Is there any way I can animate only the background image, maybe using code….

Here’s an example of a website I’m busy with (houseofgigs.co.za)
Currently I have two animations on this anyway and it works (the front image is fading in and the back image is sliding in – in this case they are both sliding in, but the front image is also fading in). If I were to hypothetically ONLY slide in the background image, and ONLY fade in the foreground image, how would I do it?

The html code for this snippet is as follows:
<div class=”boldgrid-section background-parallax hidden-xs wow slideInRight” style=”margin: 0px; padding: 0em; background-image: linear-gradient(to left, rgba(210, 81, 53, 0), rgba(210, 81, 53, 0)), url(‘http://houseofgigs.co.za/wp-content/uploads/2018/09/zz123.png&#8217;); background-size: cover; background-position: 50% 50%;” data-bg-overlaycolor=”rgba(210,81,53,0)” data-wow-duration=”2.4s” data-wow-delay=”0s” data-image-url=”http://houseofgigs.co.za/wp-content/uploads/2018/09/zz123.png”&gt;
<div class=”container-fluid”>
<div class=”row” style=”padding-bottom: 0px; padding-top: 0px;”>
<div class=”col-md-12 col-xs-12 col-sm-12″ style=”padding: 0em 1em;”>
<p class=”mod-reset”>
<img class=”alignnone wp-image-966 size-full wow fadeIn” style=”margin: 0px 0px 0px 8px;” src=”http://houseofgigs.co.za/wp-content/uploads/2018/09/ParallaxTOP222222-1.png&#8221; alt=”” width=”1920″ height=”1496″ data-wow-duration=”1.6s” data-wow-delay=”0s”>
</p>
</div>
</div>
</div>
</div>