Adding a small picture on the right side of textField with CSS


Hello i am using JavaFx to make an application. i have a small png picture that i want to add to the right side of my textField.

it is not a problem to add the picture to the frame of the textField but for some reason i cannot move the picture to any possition (which means that it does not move from the starting possition - which is left)

my code is the following:

#textField {
    -fx-background-repeat: no-repeat;

I have also tried with Center yet that did not work either.

10/31/2012 1:35:31 PM

Accepted Answer

As Marek points out in his answer you have the css attribute id wrong, you need to use -fx-background-position: right center;

Here is a short example which demonstrates adding a picture to the right side of a TextField using CSS:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class TextFieldCssSample extends Application {
  @Override public void start(Stage stage) throws Exception {
    TextField textField = new TextField();
    StackPane layout = new StackPane();
    stage.setScene(new Scene(layout));;
  public static void main(String[] args) { launch(args); }

Css File:

/* textfield.css 
   place in same location as and ensure build system copies it to output directory
   image used courtesy of creative commons attribution license:
.root {
  -fx-padding: 15; 
  -fx-background-color: cornsilk;

#textField {
  -fx-background-repeat: no-repeat;
  -fx-background-position: right center;
  -fx-font-size: 20;

Sample output:

text field background position center right

If my png image is a local file in my jar file, how will I access or refer to it?

According to the uri section of the css reference:

"address can be an absolute URI . . . or relative to the location of the CSS file."

For example

  • a) Put the css and image files in the same location in the jar file and reference with just url('pumpkin-icon.png'); OR
  • b) Put the image files in an images directory underneath the directory holding the css, and reference like url('images/pumpkin-icon.png'); OR
  • c) Put the image files in an images directory at the root of your jar, and reference like url('/images/pumpkin-icon.png');

Do not use a relative reference which uses a .. parent specifier e.g. ../images/pumpkin-icon.png as, although it works for a disk file, the .. specifier is not a valid jar protocol path and will not extract a file from a jar.

6/14/2013 5:41:44 AM

Instead of



-fx-background-position: right center;

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow