When I use the -fx-background-position with negative values in CSS, at execution background is painted out of the bounds of the target Node.
/* base icon style class */
.icon {
-fx-background-image: url("../images/glyphicons-black.png");
-fx-background-repeat: no-repeat;
}
/* quit icon style: without position offset */
.icon-quit {
-fx-background-position: 0px 0px;
}
/* useradd icon style: with negative offset */
.icon-useradd {
-fx-background-position: -90px 0px;
}
In the attachment, we can see that for user add button, the background image is painted out of bounds of the button. I also provide in attchement the used glyph image.
/* base icon style class */
.icon {
-fx-background-image: url("../images/glyphicons-black.png");
-fx-background-repeat: no-repeat;
}
/* quit icon style: without position offset */
.icon-quit {
-fx-background-position: 0px 0px;
}
/* useradd icon style: with negative offset */
.icon-useradd {
-fx-background-position: -90px 0px;
}
In the attachment, we can see that for user add button, the background image is painted out of bounds of the button. I also provide in attchement the used glyph image.