Dynamic background image

I am trying to make a dynamic background image of a Jumbotron based on the inventory image that data is being pulled from.

I created a jumbotron-dynamic css style and applied it.
In the css stylesheet, i added this data

.jumbotron-dynamic {
    padding: 2rem 1rem;
    margin-bottom: 2rem;
    background-color: #e9ecef;
    border-radius: 0.3rem;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url("http://vanderbundtcollection.com/carimages/'+serverconnect1.data.inventory_details[0].PhotoURL1");
}
@media (min-width: 576px) {
    .jumbotron {
        padding: 4rem 2rem;
    }
}
.jumbotron-fluid {
    padding-right: 0;
    padding-left: 0;
    border-radius: 0;
}

is there a way to make that work? I want the background image of the jumbotron to change based on the item.

or do i need to apply this css directly on the page that i am working with and not the css stylesheet?