QSpinbox styling help

Hi all,
I'm trying to change a QSpinbox style to match the style in the attached image.
So far I was able to get a very bad result using the code below for the parent's stylesheet.
There are plenty of problems with the current implementation but the main one I'm trying to deal with right now is how to add the background image to the spinbox value only without affecting the arrows or the suffix.
any ideas?

Attached are:
the target design, the current result and various files used in the stylesheet.

Code:

setStyleSheet(styleSheet() +"QSpinBox { "
                                "padding-left: 50px; "
                                "padding-top: 25px; "
                                "padding-bottom: 25px; "
                                "font-size:30px;"
                                "background: url(:/icons/resources/spinbox_bg.png) no-repeat;"
                                "background-size: 10px 10px;"
                                "background-position: top center;"
                                "background-origin:content;"
                                "border: 1px solid #385d8a;} "
                                 );
 
    setStyleSheet(styleSheet() + "QSpinBox::down-button {"
                                 "image: url(:/icons/resources/arrowDown.png);"
                                 "subcontrol-position: top left; width: 40px; height: 40px;"
                                 "border: 1px solid black;"
                                 "padding:0px;"
                                 "margin:0px;"
                                 "}");
 
    setStyleSheet(styleSheet() + "QSpinBox::up-button {"
                                 "image: url(:/icons/resources/arrowUp.png);"
                                  "subcontrol-position: bottom left; width: 40px; height: 40px;"
                                  "border: 1px solid black;"
                                  "padding:0px;"
                                  "margin:0px;"
                                 "}");