node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


gulp-css-url-rebase Build Status Dependency Status Used by

Rebase relative image URLs

This project has been forked to fix issues that were not resolved by its original author.


npm install gulp-css-url-rebase --save-dev


var gulp = require('gulp');
var rebase = require('gulp-css-url-rebase');
gulp.task('default', function () {

What it tries to solve

Let's say you have this structure:

├ style.css
├ some
│  └ deep-path/
│     └ style.css
 ├ logo.png
 ├ cat.png
 └ icons/
   ├ home.png
   └ cancel.png

In css/style.css you might have:

.sel {
  background: url('../img/icons/home.png') no-repeat top left;

And in css/some/deep-path/style.css:

.item {
  background: url('../../../img/logo.jpg') no-repeat top left;

When I minify everything, for example to be in ./style.css in production. I want this final file for the css above:

.sel {
  background: url('img/icons/home.jpg') no-repeat top left;
.item {
  background: url('img/logo.jpg') no-repeat top left;