Currently, I've been working on a website called
In the 'Have you seen us' section, there is a full-width block with two columns; the right column features an image while the left displays text content.
When viewing on desktop, I set the image as a background and utilize background size cover. However, when it comes to mobile devices, I use a simple image tag instead. The issue arises on Safari where the background image fails to display properly. Even though I apply a width and height of 100% to fill the block, Safari does not seem to recognize this setting. The website is built on Foundation 6, so I attempted using the Foundation Equalizer plugin to adjust the height but unfortunately, this method also did not work. Is there any solution available for this problem?
This layout functions perfectly on browsers like Chrome, but struggles on Safari.