Can I *Remove* a background image from a VisualElement?

I’ve got a couple of scenarios where it would be more effective to modify an existing visual element than create a new one just to remove the background image. (Generally related to drag-and-drop “picking up” the item from a container).

Is there a way to do this (from code?). I’ve tried setting style.backgroundImage to null, which compiles but doesn’t do anything, and I can’t find a constructor or constant of StyleBackground to use “nothing.”

This isn’t a huge deal; I could rebuild and replace the element and just not set a background, but usually when I hit these sort of “obvious” oversights, it’s because I’m missing something.

Have you tried assigning to it StyleKeyword.None/Null?

Personally I recommend using classes whenever possible. Using style directly in code or uxml can be very hard to maintain. This should work but I haven’t verified:

.no-background
{
    background-image: initial;
}

or:

.no-background
{
    background-image: none;
}

Then

element.AddToClassList("no-background");
element.RemoveFromClassList("no-background");
1 Like

spiny199: StyleKeyword.None works (as, I presume, would StyleKeyworld.Initial). I didn’t know of the existence of StyleKeyword; I’d assumed that any constants would have been on the active assigned class (StyleBackground).

dlore: I agree in general (and 95+% of the styling in this project is done that way), but in this particular case the element comes from a user (well, developer user; it’s a dev tool), and isn’t really “mine” to modify the style sheets/class lists of. The contract only allows me to touch a few specific properties.

(Side jab: Another case where being able to clone a Visual Element tree would be oh, so handy, and would let me do it the “right” way.)

Thanks to both of you!