The CSS style tag does not function in Safari

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>

Answer №1

Consider utilizing

<style type="text/css>
@media only screen and (min-resolution: 192dpi)
  { .video-preview { background-image: url(images/trailer1.jpg); }}
</style>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps to inserting a div element in the middle of two distinct background designs

I am looking to insert a div between two contrasting backgrounds. Here is an example of what it should look like: https://i.sstatic.net/5XUao.png As shown in the image, the div is positioned between a white and blue background. Can you help me achieve t ...

Using jQuery to dynamically insert variables into CSS styles

I am attempting to use jQuery 3 to modify the CSS of a class and change the background color. My first step is converting an rgba color code (properties.color) to a hexadecimal code, which is functioning correctly. Next, I try to change the background co ...

ways to set a background color for a textarea element using bootstrap

How can I add a background color to my text area field in Bootstrap? <div class="form-group"> <div class="col-xs-12"> <textarea class="form-control" id="exampleTextarea" rows="6" placeholder="Message" style="background-color: #f ...

The reason CSS properties do not inherit automatically

As I work on designing a straightforward website, I find myself grappling with CSS and particularly inheritance. My objective is to create a side menu where items are stacked vertically: #inner-flex-container { display: flex; flex-direction: column; ...

Is it possible to protect assets aside from JavaScript in Nodewebkit?

After coming across a post about securing the source code in a node-webkit desktop application on Stack Overflow, I began contemplating ways to safeguard my font files. Would using a snapshot approach, similar to the one mentioned in the post, be a viable ...

Clear all CSS styles applied to a targeted division

My website built on Wordpress links to several CSS files. One specific div has its own unique style that is separate from the main Wordpress styles. Unfortunately, the Wordpress CSS ends up interfering with my custom div's layout. Is there a way in HT ...

Extra space at the beginning and inside the body div containers

Could someone please enlighten me on what my poor, foolish eyes are failing to see? I am experiencing whitespace at the top of my browser window and between two div tag containers in all browsers. I have tried setting margin: 0px; for p, body, html, ever ...

Change the background color according to the user's input text

I want to create a text box where users can input color keywords like blue, lime, or black. When they click submit, I want the background color of the page to change accordingly. This is what I have so far: <label for="color">Color: </label> ...

What steps should I take to insert a divider in a dropdown menu?

I am attempting to enhance my dropdown menu by incorporating a separator using the following code: <li class='divider'></li> Below is my HTML code with the separator included: <ul class="dropdown-menu dropdown-menu-right" id="ul ...

Is the textarea's shape out of the ordinary?

Most textareas are typically rectangular or square in shape, similar to this: However, I am interested in having a custom-shaped textarea, like the example below: Is it feasible to achieve? ...

Creating this design using only HTML and CSS is possible by following these steps

I attempted to create this design using only HTML and CSS but unfortunately couldn't achieve it. Can anyone provide me with some assistance? Thank you in advance Check out the image on imgur.com ...

Applying the document height to window height ratio to create a scale ranging from 1 to 100

My goal is to create a scroll bar using two divs with heights of 110px and 10px. The smaller one will be nested inside the taller one, allowing for adjustment of its margin-height from 0 to 100px while still fitting within the larger div. When I refer to ...

CSS techniques for positioning a header image

I'm having an issue with using a banner I created in CS6 Illustrator as a header on my website. Despite setting it as the background, positioned at the top and set to "no-repeat", it keeps appearing at the bottom of the header area with around 300px o ...

How do you set a background image for the color of the font?

Imagine I have this piece of code: <span>Hello world!</span> Along with the following CSS: span{ color:red; } Is it possible to replace the red value with an image? Something like url(images/text-bg.png);? I am looking to add a texture to m ...

Strategies for delaying the loading of CSS when importing

import 'react-dates/lib/css/_datepicker.css' The CSS mentioned can be deferred since it is not critical. Is it possible to defer the loading of CSS when utilizing import? I found information on deferring CSS loading using <link> from Goo ...

if the input field is empty, eliminate the class

Within the code snippet, a function is present which performs the following actions. It searches for an email in the input field, then converts the email to an md5 hash, and finally generates a Gravatar URL that is inserted into a class using fadeIn(); ...

Utilizing JavaScript to dynamically adjust the height of one div to match the height of another div

Struggling to adjust the height of one div to match another using the following code: var aboutheight=document.getElementById('about').offsetHeight; document.getElementById('sampledogs').setAttribute("style","height:aboutheight"); Des ...

Tips on adjusting the width of a div container based on the size of an

I am struggling with setting the width of my "picBox" div equal to the image tag inside. I have tried adjusting the CSS code but cannot seem to get it right. Any suggestions on how to solve this issue would be greatly appreciated. Thank you. The CSS code: ...

Aligning images in a table grid of 300px by 300px dimensions

I've included my code below and I am searching for the most effective method to use CSS to center an image both horizontally and vertically within a 300 by 300 pixel square. If the image is larger, it should be resized to fit within the square, while ...

Having trouble with Jquery's Scroll to Div feature?

When I click on the image (class = 'scrollTo'), I want the page to scroll down to the next div (second-container). I've tried searching for a solution but nothing seems to work. Whenever I click, the page just refreshes. Any help would be gr ...