JavaFX Custom Component Does not Resize as Expected - javafx

Question

I have a custom JavaFX component that is basically just a combination of a pane and textfield contained within a VBox.
What I want to do is have the bloody image turn brighter red when the textfield has focus or the mouse is over the VBox as a whole, because I think it would look nice. As of right now, my plan for this is just doing it programmatically. I am unaware of how I could do this using just CSS (Let me know if this is possible though, but this isn't related to the question).
The problem
The problem I am having is that when I try to resize the component along the x-axis using the component's pref width setting, the component doesn't visually stretch / resize, it just stays the same. When I change the pref size of the VBox in the original components fxml file, the textfield and pane expand as well. I could use CSS to set the pref width for all the elements within the custom component / the VBox in the CSS for scenes that would use the component, but I want to have the component automatically expand to fill their containers and I want so just easily be able to resize it within scene builder without changing CSS. Basically the underlying problem is I don't know how to get the VBox to resize when the component resizes. I was thinking I could add a custom field to do this but I am assuming there is an easier way of doing this, as the situation I am in would seem to be common, even if I can't find a solution for it when searching.
For reference here is the fxml for the custom component:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.VBox?>
<VBox maxWidth="1.7976931348623157E308" styleClass="bloody-text-field" stylesheets="#../CSS/BloodyTextField.css" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
<children>
<TextField fx:id="textField" maxHeight="-Infinity" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" />
<Pane fx:id="bloodyPane" maxHeight="-Infinity" maxWidth="1.7976931348623157E308" minHeight="35.0" minWidth="-Infinity" styleClass="bloody-pane" />
</children>
</VBox>
Here is the CSS for the custom component. The image shouldn't be important (Its just tileable in the x dimension) so I wont include it.
.bloody-text-field .text-field {
-fx-font-family: chiller;
-fx-font-size: 32px;
-fx-text-fill: #eb0900;
-fx-text-alignment: center;
-fx-alignment: center;
-fx-background-color: rgba(0.5, 0, 0, 0.0);
-fx-prompt-text-fill: #841200;
}
.bloody-text-field .bloody-pane {
-fx-background-repeat: repeat-x;
-fx-background-size: contain;
-fx-background-image: url("../Images/blood-drip-tileable.png");
}
Here is a fxml file that explains what I want to happen.
<?xml version="1.0" encoding="UTF-8"?>
<?import controls.BloodyTextField?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Text?>
<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
<children>
<BloodyTextField layoutX="32.0" layoutY="50.0" prefHeight="91.0" prefWidth="386.0" />
<Text layoutX="32.0" layoutY="45.0" strokeType="OUTSIDE" strokeWidth="0.0" text="I would expect this to expand until it fills the pref width" />
<VBox layoutX="32.0" layoutY="186.0" prefHeight="200.0" prefWidth="462.0">
<children>
<BloodyTextField />
<BloodyTextField />
</children>
</VBox>
<Text layoutX="32.0" layoutY="182.0" strokeType="OUTSIDE" strokeWidth="0.0" text="I would expect these two components to expand to fill the vbox's width" />
</children>
</Pane>
Thanks in advance for the guidance and help :)