Use CSS background image

Questions
#1

I have a stupid question: I wonder if I can assing ANYMOD-Image-URLs to the CSS of my MOD ? I tried to use this css rule:

.element {
  background-image: url(' :src="startImage"');
}

But as expected : the syntax did not work. I nevertheless tested it, because I wanted to find out whether anymod would maybe replace the :SRC=“image” with the nessesary URL of the image. But that did not happen. Is there an option to add image-URLs to the CSS-Section of my mod ? Most likely not! Am I right? I guess background-images just cannot be applied via anymod, am I right? The reason why I did choose to use the background-image is that I initially I was faced with some trouble on safari-browser: the browser was not able to deal with my object-position property. It was positioning the image mistakenly. So I solved that issue by injecting the Image via background-image through css. That gave me more control over the image position, not only in safari. But as I can see, I will only be able to apply anymod-URLs to image-elements inside the HTML-section of the MOD, not to arbitrary Elements via background image in the CSS section of my MOD. I wonderd If I might perhaps workaround by using the STATIC URL towards my image hosted via anymod in the cloud ? I tested this , and it did of cause initially work… But I wonder: will the url-path to the image (and it’s filename) still remain the same even if the user changes the image inside the anymod-interface? I tested that and found out the Filename will change as soon as the image is changed. So , this is not a good solution . I guess it is just not feasible to somehow paste the src-string "
:src=“startImage”" into the CSS of my mod and ensure it will convert into the nessesary URL? One more workaround came to mind: I tried to apply CSS inline directly into the html section of the mod:

<div id="FlyerImage_off" style="background-image: url(':src=startBild');"></div>

but that did not do the trick neither …

#2

Hi Stefan, you can use the :style= syntax from Vue to set any styles you want. Here is an example where I’ve set the background image based on the image field, and have also rounded the corners to show another style.

#3

https://anymod.com/mod/amkar
Let me know if this is what you had in mind!

#4

Great Tyler, the example-mod was indeed very helpful! I would not have managed this without your support! Thank you very much!

#5

With the new variables in CSS you could also do it in the CSS panel like:

background-image: url('$startBild')