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/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/ingsoon.jpg) no-repeat left top;*/
 background-image:url(../images/ingsoon.jpg);
 background-repeat:no-repeat;
 background-position:left top;
 display:block;
 width:204px;
 height:137px;
 background-size:100%;

 }

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./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/ingsoon.jpg) no-repeat left top;*/
 background-image:url(../images/ingsoon.jpg);
 background-repeat:no-repeat;
 background-position:left top;
 display:block;
 width:204px;
 height:137px;
 background-size:100%;

 }

• javascript
• image
• retina.js

1 Answer 1

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/[email protected]">
</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 pile to:

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

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #logo {
    background-image: url('/images/[email protected]');
    background-size: 200px 100px;
  }
}

sources:

• http://imulus.github.io/retinajs/
• http://www.awwwards./coding-for-retina-displays-with-retinajs-tutorial.html