options.absolute

Type: Boolean

Default value: false

A boolean value that indicates to use an absolute path of a generated sprite image in CSS. Otherwise a path relative to a CSS file is used.

Usually absolute: true is used for a post-processing of a generated CSS file to replace an absolute file path with an absolute URL.

Examples

All examples below assume following source files:

/home/project/images/icons/16x16/tool.png
/home/project/images/icons/16x16/help.png
/home/project/images/icons/32x32/tool.png
/home/project/images/icons/32x32/help.png

Example #1

Default configuration:

grunt.initConfig({
  tight_sprite: {
    icons: {
      options: {
        hide: "images/icons/"
      },
      src: ["images/icons/**/*.png"],
      dest: "images/icons.png"
    }
  }
})

Assuming that we run grunt in /home/project, the sprite will be placed in /home/project/images/icons.png, and the corresponding CSS file will be in /home/project/images/icons.css.

The generated CSS files will include a relative path to the sprite:

.sprite_16x16_tool { background: url(icons.png) ...}
...

Example #2

Different placement of a CSS file:

grunt.initConfig({
  tight_sprite: {
    icons: {
      options: {
        hide: "images/icons/"
      },
      src: ["images/icons/**/*.png"],
      css:  "css/icons.css",
      dest: "images/icons.png"
    }
  }
})

Assuming that we run grunt in /home/project, the sprite will be placed in /home/project/images/icons.png, and the corresponding CSS file will be in /home/project/css/icons.css.

The generated CSS files will include a relative path to the sprite:

.sprite_16x16_tool { background: url(../images/icons.png) ...}
...

Example #3

Absolute link to a sprite:

grunt.initConfig({
  tight_sprite: {
    icons: {
      options: {
        absolute: true,
        hide: "images/icons/"
      },
      src: ["images/icons/**/*.png"],
      css:  "css/icons.css",
      dest: "images/icons.png"
    }
  }
})

Assuming that we run grunt in /home/project, the sprite will be placed in /home/project/images/icons.png, and the corresponding CSS file will be in /home/project/css/icons.css.

The generated CSS files will include an absolute path to the sprite:

.sprite_16x16_tool { background: url(/home/project/images/icons.png) ...}
...