Creé un div C.
Su posición absoluta está configurada para permanecer entre el margen inferior del div A y el margen superior del div B.
Cada div es un rectángulo con el mismo ancho.
C es menos alto que A y B. Utilizo esta solución para "ocultar" la costura entre las dos imágenes de fondo de A y B cubriendo el área donde sus márgenes se encuentran. C tiene una imagen de fondo en sí misma.
Administro estas configuraciones usando la inserción de código Javascript en el lugar correcto de un panel de tema WP (tema Uncode, no usé Javascript pligin).
Está bien con todos los navegadores (probé MUCHOS navegadores, también la versión móvil) pero Firefox. Realmente no puedo entender por qué.
El código es:
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";Puedes verificarlo tú mismo: https://www.dolomitiinebike.it/
El sitio web funciona bien en todos los navegadores, pero al abrirlo con Firefox, todo se rompe.
Resolví instalar un complemento para agregar scripts de Javascript y Jquery (JS Inserter) y luego traduje el código de Javascript a Jquery. Agrego la secuencia de comandos en la sección de pie de página. Esta solución también es compatible con Firefox.
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" });