3

I don't have much code to put in, but looking for help in order to save what hair is left on my head...

I'm using retina.js, and it isn't working for any of the images. The @2x images are in the same folder as the smaller ones. One if them isn't exactly twice the size - designer sent me an image that was a pixel or two of - so I won't worry about that one as I assume that once the other images are loaded, this one will work when sized correctly.

I've tried shorthand background:url(foo.jpg).... and background-image:url(foo.jpg), with and without the images in "". I've resigned myself to thinking I'm missing something stupid, and am just not seeing it. Any help would be appreciated!

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../js/index.js"></script>
<script type="text/javascript" src="../js/retina.js"></script>

HTML:

<ul class="grid" id="movie-grid">
<li class="movie">
  <div class="poster"></div>
  <h2 class="title"><a href="foo.html">Title</a></h2>
  <p class="desc">TV Movie</p>
</li>
</ul>

and the CSS:

    .poster {
 /*background:url(../images/comingsoon.jpg) no-repeat left top;*/
 background-image:url(../images/comingsoon.jpg);
 background-repeat:no-repeat;
 background-position:left top;
 display:block;
 width:204px;
 height:137px;
 background-size:100%;

 }
alexwc_
  • 1,595
  • 2
  • 24
  • 35

1 Answers1

5

The problem is that you are trying to use retina.js to change an image within your CSS. I believe that the standard retina.js functionality allows you to change/swap out images within your html code like this:

<header>
   <img src="/images/logo.png">
</header>

would change to

<header>
   <img src="/images/logo@2x.png">
</header>


In order to get retina.js to swap out images within your stylesheet you will need to download the LESS CSS Mixin provided by the retina.js website. Then follow the steps they outline:

Syntax: .at2x(@path, [optional] @width: auto, [optional] @height: auto);

Steps:

  1. Add the .at2x() mixin from retina.less to your LESS stylesheet
  2. In your stylesheet, call the .at2x() mixin anywhere instead of using background-image
#logo {
  .at2x('/images/my_image.png', 200px, 100px);
}

Will compile to: 

#logo { 
   background-image: url('/images/my_image.png');
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #logo {
    background-image: url('/images/my_image@2x.png');
    background-size: 200px 100px;
  }
}


sources:

Weston
  • 416
  • 1
  • 9
  • 17
  • Great, thanks Weston, your answer did the trick. I'll accept your answer, but I have a quick question: So when using LESS and retina.js, you have to include links to the LESS stylesheet and the LESS js file? I've never used LESS before. Thanks again! – alexwc_ Jul 02 '14 at 21:00
  • Oh boy, I'm SOOO late to this party. @leftside to answer your question: No. The LESS/Sass mixins are only when you want to change the image within your style sheet. Using `retina.js` does not require the use of the LESS/Sass mixin. I can see how this is confusing... a JavaScript solution providing a CSS preprocessor solution as well? Weird, but I'll take it :) – Ricardo Zea Jul 07 '15 at 03:04