Adding a small image on the right side of textField using CSS

Question

Hello, I am using JavaFx to build an application. I have a small png image that I want to add to the right side of my text box.

There is no need to add an image to the frame of the text field, but for some reason I cannot move the image to any place (which means that it does not move from the original field - what remains)

my code is as follows:

#textField { -fx-background-image:url('apr.png'); -fx-background-repeat: no-repeat; -fx-background-image-position:right; } 

I also tried with the Center, but that didn't work either.

Answer 1

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

Here is a quick example demonstrating how to add an image 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(); textField.setId("textField"); StackPane layout = new StackPane(); layout.getChildren().addAll(textField); layout.getStylesheets().add(this.getClass().getResource("textfield.css").toExternalForm()); stage.setScene(new Scene(layout)); stage.show(); } public static void main(String[] args) { launch(args); } } 

Css file:

 /* textfield.css place in same location as TextFieldCssSample.java and ensure build system copies it to output directory image used courtesy of creative commons attribution license: http://www.rockettheme.com/blog/design/1658-free-halloween-icon-pack1 */ .root { -fx-padding: 15; -fx-background-color: cornsilk; } #textField { -fx-background-image:url('http://icons.iconarchive.com/icons/rockettheme/halloween/32/pumpkin-icon.png'); -fx-background-repeat: no-repeat; -fx-background-position: right center; -fx-font-size: 20; } 

Output Example:

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

In the uri section of the css link :

"may 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 place in the jar file and specify only url('pumpkin-icon.png'); OR
• b) Put the image files in the images directory under the directory containing css and a url('images/pumpkin-icon.png'); like link url('images/pumpkin-icon.png'); OR
• c) Put the image files in the images directory in the root of your jar, and the link as url('/images/pumpkin-icon.png');

Do not use a relative reference that uses the parent specifier .. , for example. ../images/pumpkin-icon.png , because although it works for a file on disk, the .. specifier is not a valid jar protocol and does not extract a file from a jar.

Answer 2

Instead

 -fx-background-image-position:right; 

using

 -fx-background-position: right center; 

Answer 3

copy this html and follow me:

 <div class="textBoxWithImage"> <img src="YOUR IMG URL" class="textBoxWithImage_img"/> <textarea id="textField"></textarea> // Change it with your textField ! </div> 

fill in the image url above the img tag above and then use this stylesheet !:

 .textBoxWithImage{ position:relative; overflow:hidden; } .textBoxWithImage_img{ position:absolute; top:0px; right:0px; z-index:1; } #textField{ background:transparent; position:relative; top:0px; left:0px; z-index:2; } 

Good luck friend!