Richfaces 4.0 Skin issue

Question

For my webapp i'm trying to introduce the richface skinning. I'm getting an error that leaves me clueless.

Old situation (works) :

messages.css

#inhoud #infoblock {
  min-height:36px;
  width:100%;
  background:#B1D1FA url(#{resource['image/helpmelding.gif']});
  padding:2px 0;
  background-position: 3px center;
}

New situation (Doesn't work correctly)

messages.ecss

#inhoud #infoblock {
  background-color:'#{richSkin.infoBlockBackground}';
  padding:2px 0;
  background-image:url(#{resource['image/helpmelding.gif']});
  background-position: 3px center;
  background-repeat:no-repeat;
  min-height:36px;
  width:100%;
}

result:

*#inhoud *#infoblock {
  background-color: #B1D1FA;
  padding:2px 0;
}

Stopped css parsing when hitting

#{resource['image/helpmelding.gif']}

Logger:

WARNING: Problem parsing 'messages.ecss' resource: Error in expression. 
Invalid token "#". Was expecting one of: <S>, "+", "-", <HASH>, <STRING>, <URI>, "inherit", <EMS>, <EXS>, <LENGTH_PX>, <LENGTH_CM>, <LENGTH_MM>, <LENGTH_IN>,
 <LENGTH_PT>, <LENGTH_PC>, <ANGLE_DEG>, <ANGLE_RAD>, <ANGLE_GRAD>, <TIME_MS>, <TIME_S>, <FREQ_HZ>, <FREQ_KHZ>, <DIMEN>,
<PERCENTAGE>, <NUMBER>, "rgb(", <FUNCTION>, <IDENT>, <UNICODERANGE>.
mei 06, 2014 2:25:42 PM org.richfaces.resource.CompiledCSSResource$ErrorHandlerImpl logException

Settings

web.xml

<!-- Resource Servlet van Richfaces-->
<servlet>
    <servlet-name>Resource Servlet</servlet-name>
    <servlet-class>org.richfaces.webapp.ResourceServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>Resource Servlet</servlet-name>
    <url-pattern>/org.richfaces.resources/*</url-pattern>
</servlet-mapping>

pom.xml

<plugin>
    <groupId>org.richfaces.cdk</groupId>
    <artifactId>maven-richfaces-resources-plugin</artifactId>
    <version>${org.richfaces.bom.version}</version>
    <configuration>
        <skins>
            <!-- the name of your skin -->
            <skin>LUID</skin>
        </skins>

        <excludedFiles>
            <exclude>^\Qorg.richfaces.renderkit.html.images.\E.*</exclude>
            <exclude>^\Qorg.richfaces.renderkit.html.iconimages.\E.*</exclude>
            <exclude>^\Qorg.richfaces.renderkit.html.iconimages.\E.*</exclude>
        </excludedFiles>                    

        <includedContentTypes>
            <include>application/javascript</include>
            <include>text/css</include>
            <include>image/.+</include>
        </includedContentTypes>

        <fileNameMappings>
            <property>
                <name>^.*showcase.*/([^/]+\.css)$</name>
                <value>org.richfaces.luid.css/$1</value>
            </property>
            <property>
                <name>^.+/([^/]+\.(png|gif|jpg))$</name>
                <value>org.richfaces.images/$1</value>
            </property>
            <property>
                <name>^.+/([^/]+\.css)$</name>
                <value>org.richfaces.css/$1</value>
            </property>
        </fileNameMappings>
    </configuration>
    ....
</plugin>

Answer 1

As the error tells you, the url cannot start with a '#'. You need to wrap it in quotes:

background-image: url("#{resource['image/helpmelding.gif']}");