Regular Expression to Convert Relative URLs to Absolute URLs in CSS

I am combining multiple CSS files into one (the hierarchy of the CSS files is variant), so I need to convert relative URLs in CSS files to absolute URLs.

Below is the requirement;

CSS file URL: http://example.com/template/default/css/style.css
Domain: http://example.com

Input

#test {
    background:url(../images/test.jpg);
    background:url( 'test.jpg' );
    background:url("../../common/test.jpg"  );
    background:url(http://example.com/test.jpg);
    background:url('https://example.com/test.jpg');
    background:url( '//example.com/test.jpg' );
    background:url( "//example.com/test.jpg" );
    background:url(//example.com/test.jpg);
}

Required Output

#test {
    background:url(http://example.com/template/default/images/test.jpg);
    background:url( 'http://example.com/template/default/css/test.jpg' );
    background:url("http://example.com/template/common/test.jpg"  );
    background:url(http://example.com/test.jpg);
    background:url('https://example.com/test.jpg');
    background:url( '//example.com/test.jpg' );
    background:url( "//example.com/test.jpg" );
    background:url(//example.com/test.jpg);
}

Please note the ../ and ../../ for relative paths.

I have tried the similar solutions from preg_replace() regex to match relative url() paths in CSS files but that're a different and I am not getting it to work for my situation.

Thanks in advance for help.