/**
 * Retina Backgrounds for Compass
 * by:              Gaya Kessler
 * last update:     03/11/14
 *
 * Modified by Matt Przybylski
 *     - Added $retinaWidth and $retinaHeight variables since we have nothing to compute those on the fly without Compass
 *
 * Usage:
 * 1. create background image for pixel ratio 1 screens and put it somewhere in your images folder.
 * 2. create background image for pixel ratio 2 screens and put it somewhere in your images folder.
 * 3. include the background-image mixin in your Sass
 */
@mixin background-retina($normal, $retina, $retinaWidth, $retinaHeight, $contain: false, $size: false) {
    background-image: url($path-images + "/" + $normal);

    @if $size {
        background-size: $size;
    }

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
        background-image: url($path-images + "/" + $retina);

        @if $contain == true {
            background-size: contain;
        } @else {
            @if $size {
                background-size: $size;
            } @else {
                background-size: ceil($retinaWidth / 2) ceil($retinaHeight / 2);
            }
        }
    }
}