Ahh.... After a long hours of debugging I have finally found the issue. It was my foolishness because of which I struggled. I wanted to delete this question but thought that it would help new comers like me when the stuck to similar issues.

Problem was here

loader: 'url-loader?limit=10000'

I was setting the limit to file size of 10kb without really knowing what it does. And the image which I was loading was of size 21kb ! This happens when you copy some else webpack config files :) Sign of javascript fatigue !

depending on how your packs are structured/applied you might be able to use a loop to generate a bunch of generic styles. See the documentation here: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#id35

Do you really need 3 separate components to get your image url? wouldn't: $img and then setting that to /folder/img.ext be far easier?

Also, you don't need the #{} for repeat by the way.

I hope this is what you're after… the question is not very specific in terms of what you need the outcome to actually be.

Cheers, Jannis

Update:

Okay, I see you've updated your question (thanks for that). I believe this could be a little better for general use:

@mixin background($imgpath,$position:0 0,$repeat: no-repeat) {
    background: {
        image: url($imgpath);
        position: $position;
        repeat: $repeat;
    }
}
.testing {
    @include background('/my/img/path.png');
}

This will then output:

.testing {
  background-image: url("/my/img/path.png");
  background-position: 0 0;
  background-repeat: no-repeat;
}

Or you can use the shorthand version:

@mixin backgroundShorthand($imgpath,$position:0 0,$repeat: no-repeat) {
    background: transparent url(#{$imgpath}) $repeat $position;
}
.testing2 {
    @include backgroundShorthand('/my/img/path.png');
}

Which will generate:

.testing2 {
  background: transparent url(/my/img/path.png) no-repeat 0 0;
}

Lastly if you want to specify your base path to your image directory separately you can do the following:

$imagedir:'/static/images/'; // define the base path before the mixin

@mixin backgroundShorthandWithExternalVar($filename,$position:0 0,$repeat: no-repeat) {
    background: transparent url(#{$imagedir}#{$filename}) $repeat $position;
}
.testing3 {
    @include backgroundShorthandWithExternalVar('filename.png');
}

This will then generate:

.testing3 {
  background: transparent url(/static/images/filename.png) no-repeat 0 0;
}

Is this what you needed?

If not feel free to update the question or reply/comment.

Client Side solution

In Client Side, you can use something like library (that uses HTML 5): http://html2canvas.hertzen.com/ =)

With it, you can use something like:

html2canvas(document.getElementById("element-id"), {
onrendered: function(canvas) {
  var image = new Image();
  image.src = canvas.toDataURL("image/png"); // This should be image/png as browsers (only) support it (to biggest compatibilty)
  // Append image (yes, it is a DOM element!) to the DOM and etc here..
}
});

Server Side solution

To get a server side solution, you can use PhantomJS (that uses Webkit) or SlimerJS (that uses Gecko).

A good library that is a wrapper to these two is CasperJS. Using CasperJS, a code that can be used is:

casper.start(casper.cli.args[0], function() {
    this.captureSelector(casper.cli.args[1], casper.cli.args[2]);
});

casper.run();

Save it as screenshot.js (just an example of name, you can choice a name too) and run it by using something like:

casperjs screenshot.js (URL) (image path) (selector)

From any language.

A (possible better) alternative to Server Side

Other option is use Selenium, but this is only valid if you can run Java in your server (and install browsers manually) (PhantomJS/SlimerJS/CasperJS, however, does not have these requeriments)

Use it only if you need to emulate a browser completely (maybe when using plugins...)

The best of Selenium is that you can use wrappers to connect to it (using Selenium Server), see the documentation to get the list: http://code.google.com/p/selenium/w/list

In a perfect world your URL paths should be absolute, so always starting with / refering to the base path of the domain.

You have:

background-image: url('./../img/coffee.png') no-repeat;

The shape you should be looking for is:

 background-image: url('/folder/img/coffee.png') no-repeat;
                        ^ This lead slash references the base path of the domain.

So, the above example is domain.com/folder/img/coffee.png - you see the leading / is the base the whole URL is based from.

The advantage of this is your SCSS or CSS or image files can be placed in any location in your domain structure.

Absolute Pathing is the key to success!

Example 2:

 background-image: url('/images/tea.png') no-repeat;

Image is located at:

 mydomain.org/images/tea.png 

The location of the SCSS or CSS file is not important, as long as it's on the same domain.

It works if I add at the beginning of the HTML source : (remove space after < (I cannot copy-paste correctly...))

< meta http-equiv="X-UA-Compatible" content="IE=edge">