CODEWITHSUNDEEP
cssmedia-queriesretina-display
Ilja
Ilja

Reputation: 46479

High dpi media query not rewriting original css

I'm styling my website and I would like it to retina display friendly, for this I was planning to use media queries for high dpi displays, however I don't think that media query is working, as when I view browser generate code on my retina macbook, I can see that body still has default css, instead of one in the media query. Why is that? Is there anything additional I need to add to it? Note both default css and media queries are in the same css file, However I don't think that is the issue.

  /* ==========================================================================
   Theme Style
   ========================================================================== */

body {
    background-color: #ebebeb;
    /* background-image: url("../images/bg.png"); */
    background-image: url("http://bit.ly/Z1zQeb");
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    /* background-image: url("../images/[email protected]"); */
    background-image: url("http://bit.ly/ZgBQ4c");
    background-size: 147px 147px;

}

EDIT: I'm also getting this error in console: INDEX_SIZE_ERR: DOM Exception 1: Index or size was negative, or greater than the allowed value.

Upvotes: 0

Views: 527

Answers (1)

Sean H
Sean H

Reputation: 141

You haven't specified a tag to apply the styles to. Try this.

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body {
        /* background-image: url("../images/[email protected]"); */
        background-image: url("http://bit.ly/ZgBQ4c");
        background-size: 147px 147px;
    }
}

Upvotes: 1

Related Questions