Added a new retina-image mixin for quick retina background-images

[plapier]

Pertaining to #136

[plapier]

I don't think we want to set the height and width properties?
The current mixin forces the elements height and width, which may be different from the image-dimensions and background-size.

A user might want to do:

background-image: url(...);
background-repeat: no-repeat;
background-size: 60px 50px;
height: 300px;
width: 300px;

[kaishin]

Agreed. What about an optional background-size instead?

background-size: $image-width $image-height;

[plapier]

I'm going to change the mixin to accept a $background-size variable rather than $image-width, $image-height.

This way you can pass anything to the background-size property: contain cover or 50px 100px

[plapier]

I'm also removing the height and width from this mixin.

[kaishin]

I tend to use background images in combination with linear-gradient. Any way to make this mixin take that into consideration?

[JoshuaJones]

We are starting to step into a lot of different use cases I think.

You have basic retina-image needs, which would be an icon which makes use of the width and height as wells as background-size, the need for repeating retina-image needs, for example a texture on the body which doesn't need the width and height, and then you have what @kaishin brings up; multiple backgrounds.

Thoughts on maybe breaking things up? A retina-image mixin and perhaps a retina-background mixin?

[plapier]

New PR with changes, see here: #174