Placing image between two marker using css in Leaflet?

Question

In my application where i use leaflet api, i am able to put two gate markers and polyline drawn between them.

Here, i just wanted to find out the way to put the image from css on the polyline which should fit between two markers.I know the image has width and height.

I believe there must be some css trick to do that, although i can't use fill pattern method due to limited understanding about leaflet.

Script(putting two markers and line between them)

var polylineGate2 = new L.Polyline([], { color: 'yellow' });
            function gatePlace2(e) {
                // New marker on coordinate, add it to the map
                new L.Marker(e.latlng, { icon: gateIcon, draggable: false }).addTo(currentFeatureGroup);
                // Add coordinate to the polyline
                polylineGate2.addLatLng(e.latlng).addTo(currentFeatureGroup);
                var decorator = L.polylineDecorator(polylineGate2, {
                    patterns: [
                        // define a pattern of 10px-wide dashes, repeated every 20px on the line
                        { offset: 5, repeat: '20px', symbol: new L.Symbol.dash({ pixelSize: 4 }) }
                    ]
                }).addTo(currentFeatureGroup);
                map.off('click', gatePlace2);
                polylineGate2 = new L.Polyline([], { color: 'pink' });
            }