I created a div C.
Its absolute position is setted to stay between the bottom margin of div A and top margin of div B.
Every div is a rectangle with same width.
C is a less hig than A and B. I use this solution in order do "hide" the seam between the two background image of A and B by covering the area where their margins meet one another. C has a backgorund image itself.
I manage these settings usign Javascript code insert in the right place of a WP theme Dashboard (Uncode theme, I didn't use Javascript pligin).
It's all right with all browser (I tried a LOT of browsers, mobile version too) but Firefox. I really can't understand why.
The code is:
var divTop = document.getElementsByClassName("A")[0].clientHeight;
var divWidth = document.getElementsByClassName("A")[0].clientWidth;
var Gap = document.getElementsByClassName("C")[0].clientHeight/2;
document.getElementsByClassName('C')[0].style.top=divTop-Gap + ".px";
document.getElementsByClassName('C')[0].style.width=divWidth + ".px";
U can verify by yourself: https://www.dolomitiinebike.it/
The website works well in every browser but opening it with firefox, everything is broken.
I solved installing a plug-in for adding Javascript and Jquery scripts (JS Inserter) and then I translate the code from Javascript to Jquery. I add the script infooter section. This solution is compatible with Firefox too.
var topHeight = jQuery('A').outerHeight();
var width = jQuery('A').outerWidth();
var gap = jQuery('C').outerHeight()/2;
jQuery('C').css({ top : topHeight - gap + "px" });
jQuery('C').css({ width : width + "px" });