I am trying to dynamically load background images using CSS based on the display resolution using the @media keyword. This method works perfectly in Firefox and Chrome, but unfortunately, it does not seem to work in Safari. Is there something I might be overlooking?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Snowboard School: Ski Resort</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/fileadmin/css/style.css?1496823820" media="all" title="main">
<style type="text/css">@media(min-resolution: 1dppx){ .trailer { background-image: url(fileadmin/_processed_/e/d/csm_trailer1_ca6cb9b743.jpg); }}</style>
</head>
<body>
<header>
<div class="trailer">
...
</div>
</header>
</body>
</html>