Image header loading in all browsers but Safari, why?

On my companies website that has just gone live, the header image which is pulled through Advance Custom Fields via WordPress is working fine. The URL string is loading correctly and everything seems good. However when I check it on Safari, it doesn’t seem to be loading.

Any ideas?


Your website looks fine for me in Chrome for Windows, Chrome on Mac OSX, Safari on Mac OSX, and Safari on iOS. (latest versions)

It doesn’t work properly in Safari 5.1 for Windows however that is an old discontinued browser.

There is a typo in the header that is being ignored by newer browsers, the style element on the header should contain url(…..) but it contains url(….. (i.e. the closing bracket is missing)

when I fix this in the developer tools of Safari 5.1 the background image loads.

  <header class="image-hero" style="background-image: url(" alt="Page Image" "173);"="">