CSS path images in Java FX

the following image shows my problem:

As you can see, The button icons is showing up if I open my view.fxml via Scene builder, but they don't show up when I run the program via my IDE (running in the foreground).

I assume that I should change the paths, but I still want to able to use scene builder. How ever I'd be happy just to get it working via my IDE, to start with.

The funny thing is that my code assist gives me warnings/errors if change the path.

I'l post my .fxml and .css just to be thorough:

  <?scenebuilder-stylesheet ../content/style.css?>

  <Pane prefHeight="379.0" prefWidth="616.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" fx:controller="controller.Controller">
    <children>
      <ColorPicker layoutX="16.0" layoutY="36.0" />
      <MenuBar layoutX="0.0" layoutY="0.0" maxWidth="-Infinity" minHeight="21.000099999997474" prefHeight="21.000099999997474" prefWidth="616.0">
        <menus>
          <Menu mnemonicParsing="false" text="File">
            <items>
              <MenuItem mnemonicParsing="false" text="Close" />
            </items>
          </Menu>
          <Menu mnemonicParsing="false" text="Edit">
            <items>
              <MenuItem mnemonicParsing="false" text="Delete" />
            </items>
          </Menu>
          <Menu mnemonicParsing="false" text="Help">
            <items>
              <MenuItem mnemonicParsing="false" text="About" />
            </items>
          </Menu>
        </menus>
      </MenuBar>
      <Button id="squareBtn" layoutX="67.0" layoutY="77.0" mnemonicParsing="false" prefHeight="32.0" prefWidth="32.0" text="" />
      <Button id="circleBtn" layoutX="16.0" layoutY="77.0" mnemonicParsing="false" prefHeight="32.0" prefWidth="32.0" style="" text="" />
      <Button id="triangleBtn" layoutX="16.0" layoutY="119.0" mnemonicParsing="false" prefHeight="32.0" prefWidth="32.0" style="" text="" />
      <Button id="lineBtn" layoutX="67.0" layoutY="119.0" mnemonicParsing="false" prefHeight="32.0" prefWidth="32.0" style="" text="" />
      <Separator layoutX="110.0" layoutY="21.0" orientation="VERTICAL" prefHeight="360.0" />
    </children>
  </Pane>



 #circleBtn {
   -fx-background-image: url("circle.png");
   -fx-background-size: 32 32;
   -fx-background-repeat: no-repeat;
   -fx-background-position:center;
 }
 #squareBtn {
   -fx-background-image: url("square.png");
   -fx-background-size: 32 32;
   -fx-background-repeat: no-repeat;
   -fx-background-position:center;
 }
 #triangleBtn {
   -fx-background-image: url("triangle.png");
   -fx-background-size: 32 32;
   -fx-background-repeat: no-repeat;
   -fx-background-position:center;
 }
 #lineBtn {
   -fx-background-image: url("line.png");
   -fx-background-size: 32 32;
   -fx-background-repeat: no-repeat;
   -fx-background-position:center;
 }