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?

Hello,
When posting code in the forum, please make sure to format it as explained here:

As for your question - you cannot use such code in your css files:

 background-image: url("http://vanderbundtcollection.com/carimages/'+serverconnect1.data.inventory_details[0].PhotoURL1");

You need to apply this on the element on the page, using the dynamic attributes > styling > style to do this.

okay, do i use the name jumbotron as my dynamic name class or do i just use background-image and it will apply? I tried to find some tutorial on this but didn’t see any avail for image use.

Select your element, it doesn’t matter if it has a class of jumbotron or not. Then ad new dynamic attribute > styling > style:

Add the style you want to make dynamic, in your case background-image:

and enter your dynamic expression there.

okay, that is what i have on there

and when i view the code it shows this

<div class="text-center text-light bg-dark jumbotron background-image" dmx-class="" dmx-style:background-image.jumbotron.important="'http://vanderbundtcollection.com/carimages/'+serverconnect1.data.inventory_details[0].photoURL1">

However it is still showing the wrong image and not the dynamic image pulled from the database query.

That is wrong, as my explanation above shows you should only enter background-image not background-image.jumbotron.important

This is not a class a name, it’s the backgeound-image CSS rule, which has a specific syntax:

background-image: url("path/to/my_image.jpg");

So you should be using this syntax in the value for the background image. And in your specific case it would be:

dmx-style:background-image="'url(/carimages/' + serverconnect1.data.inventory_details[0].photoURL1 + ')'"

i was able to update the correct dynamic attribute, but it is still not showing the correct background image.

I did verify that the data for the photoURL1 is accurate as it displays on the page correctly in the section below:
http://vanderbundtcollection.com/inventory_details.php?inventorynum=1020

Please check my article regarding formatting code in your posts. You should wrap your code in backticks ` and not in single quotes ’

I don’t think you copied my code exactly as i provided it. Please just open code view and add this to your div:

dmx-style:background-image="'url(/carimages/' + serverconnect1.data.inventory_details[0].photoURL1 + ')'"
1 Like

that worked - thank you!!

one more quick question…if i wanted to add an opacity to that background image…would i need to create a new dynamic attribute or would i add it to the existing details?

If the opacity doesn’t need to be a dynamic value, you just add it in your existing CSS file.
Dynamic attributes are only used for dynamic values.