2 Replies Latest reply: Dec 7, 2012 12:41 PM by twasyl RSS

    Absolute URLs for image in CSS files using IntelliJ IDEA

      Hi everyone,

      I'm facing a problem with absolute URLs for images in a CSS file using JavaFX 2.2.3. Given the following FXML:
      <?xml version="1.0" encoding="UTF-8"?>
      <?import java.lang.*?>
      <?import java.util.*?>
      <?import javafx.scene.*?>
      <?import javafx.scene.control.*?>
      <?import javafx.scene.layout.*?>
      <?import java.net.*?>
      <AnchorPane xmlns:fx="http://javafx.com/fxml" fx:id="root">
              <URL value="@/com/twasyl/testerfx/resources/style/TesterFX.css" />
              <Button prefHeight="128" prefWidth="128">
                      <String fx:value="testButton" />
      And the given CSS file:
      .testButton {
          -fx-background-image: url('/com/twasyl/testerfx/resources/images/globe.png');
          -fx-background-repeat: no-repeat;
      The display is absolutely correct using NetBeans 7.2.1 but in IntelliJ 12 the image is not displayed. But if in my CSS file I use relative URL like this:
      .testButton {
          -fx-background-image: url('../images/globe.png');
          -fx-background-repeat: no-repeat;
      it's working in both NetBeans and IntelliJ. I've also tried to the URL locator by adding a @ at the beginning of the URL, without success. So I was wondering if it's more an IDE issue, or JavaFX one. Have anyone encounter this problem?

      Thank you.
        • 1. Re: Absolute URLs for image in CSS files using IntelliJ IDEA
          Make sure your idea project is copying CSS resource files.


          Project Settings > Compiler > resource patterns

          • 2. Re: Absolute URLs for image in CSS files using IntelliJ IDEA

            Thank you for your response. It seems the CSS file is included. In the out directory it is present. Moreover, I added the pattern:
            in the resources pattern but it is still not working. Also, if I modify my CSS file to:
            .testButton {
                -fx-background-image: url('/com/twasyl/testerfx/resources/images/globe.png');
                -fx-background-color: red;
            The red background is displayed but not the image. The only good news is that I made an Ant task to build my test project, and the image is displayed. So I really don't get this behavior in IntelliJ IDEA.