search

chyingp / grunt-inline

Brings externally referenced resources, such as js, css and images, into a single file.
MIT License
86 stars 55 forks source link

CSS background-image path gets messed up #25

Open curtisblackwell opened 10 years ago

curtisblackwell commented 10 years ago

When grunt-inline inlines my css, it messes up the path to my background images.

background: #463862 url(/assets/img/mountain.jpg) no-repeat center top fixed;

becomes

background: #463862 url(../../../../../assets/img/mountain.jpg) no-repeat center top fixed;

If I use 

background: #463862 url(assets/img/mountain.jpg) no-repeat center top fixed;

I end up with 

background: #463862 url(css/assets/img/mountain.jpg) no-repeat center top fixed;
chyingp commented 10 years ago

@curtisblackwell more information would be better :)

is the project structure like bellow?: /index.html /assets/css/style.css /assets/img/mountain.jpg

and in index.html, there's something like:

<link href="assets/css/style.css" rel="stylesheet" />
curtisblackwell commented 10 years ago

The structure is as you say, but the href was /assets/css/style.css.

Using assets/css/style.css works, though.

chyingp commented 10 years ago

@curtisblackwell it seems it's because grunt-inline doesn't support absolute path yet. It will be supported in the near feature, and I will let you know then :)

curtisblackwell commented 10 years ago

Yep. Thanks!

monte-hayward commented 10 years ago

Hi chyingp A similar issue occurs with protocol-relative urls. url('//netdna.bootstrapcdn.com/font-awesome/3.2.0/font/fontawesome-webfont.eot?v=3.2.0') becomes url(../../../../../../netdna.bootstrapcdn.com/font-awesome/3.2.0/font/fontawesome-webfont.eot?v=3.2.0)

In my build, this url survives recess, uncss, and then gets altered by grunt-inline. Thanks for checking it out. Monte

chyingp commented 10 years ago

@monte-hayward this problem is not the same as the one @curtisblackwell mentioned. I've put your issue in #27 , let's discuss it there. :)