https://github.com/driebit/css-inline-images

Node module for inlining images in a CSS file
https://github.com/driebit/css-inline-images

Last synced: 2 days ago
JSON representation

Node module for inlining images in a CSS file

• Host: GitHub
• URL: https://github.com/driebit/css-inline-images
• Owner: driebit
• License: mit
• Created: 2014-10-14T07:46:27.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2018-01-24T08:50:45.000Z (about 7 years ago)
• Last Synced: 2025-01-16T16:42:06.412Z (14 days ago)
• Language: JavaScript
• Size: 3.91 KB
• Stars: 2
• Watchers: 21
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
css-inline-images

=================

Simple node module for inlining images as base64 strings in CSS.

## Installation

Install with NPM like any other package

```bash

npm install css-inline-images

```

## Usage

Append `?embed` to the urls of the images that you want inlined

```javascript

var cssInlineImages = require('css-inline-images'),

    inputCss,

    outputCss;

inputCss = [

    '.leave-me-alone {',

        'background-image: url(file.gif);',

    '}',

    '.embed-me {',

        'background-image: url(file.gif?embed);',

    '}'

].join('');

outputCss = cssInlineImages(inputCss, {

    webRoot: 'web',

    path: 'otherImages'

});

```

The module will search for `url()` declarations in your CSS code so its use is not limited to background images.

## Options

* `webRoot`

  The web root of your web project. This property will be used as a start point for all file paths.

  This is enough for absolute urls (e.g.  `url(/images/file.gif?embed)`)

* `path`

  Used in addition to `webRoot` to determine the paths for relative urls (e.g. `url(images/file.gif?embed)`)

### Example

With these options the following paths will be used to locate the images in the filesystem

```javascript

{

    webRoot: 'web',

    path: 'otherImages'

}

```

* `url(/images/file.gif?embed)` => `web/images/file.gif`

* `url(file.gif?embed)` => `web/otherImages/file.gif`