Hi there,

I'm currently working in a sub-theme of Zen for D6 and every time I turn on the CSS optimization the theme breaks because all the image's paths change.

Under my sub-theme folder I have created two directories /css and /images to keep everything separated. I also have a file named main.css that have several @import calls, and everything is being concatenated and compressed correctly except the path inside the url().

This is what is happening.

Before CSS optimization

sites/all/themes/mytheme/css/main.css

/* -- layout and content -- */
@import url("layout.css");
@import url("content.css");

/* -- foo bar stuff -- */
@import url("foo/bar/foo-bar.css");

sites/all/themes/mytheme/css/foo/bar/foo-bar.css

div.with-bg-image {
  width: 25px;
  height: 25px;
  background: url(../../../images/icon-search-25x25.gif) left top no-repeat;
  border: none;
  margin: 0 0 0 10px;
  padding: 0;
  color: #000;
}

After CSS optimization

mycompressedfile.css (taken from firebug)

...
div.with-bg-image {
background:transparent url(/sites/all/images/icon-search-25x25.gif) no-repeat scroll left top;
border:medium none;
color:#000;
height:25px;
margin:0 0 0 10px;
padding:0;
width:25px;
}
...

The right path to the icon-search-25x25.gif should be /sites/all/themes/mytheme/images/icon-search-25x25.gif, how can I fix this?

Comments

altrugon’s picture

Version: 6.x-dev » 7.x-dev

It's happening in D7 too.

altrugon’s picture

Issue tags: +optimization
casey’s picture

Issue tags: +CSS aggregation

tagging

casey’s picture

Component: theme system » base system
Wim Leers’s picture

Status: Active » Closed (duplicate)