how use background-image field in uss?

I put my image in the Resources folder and expected it to be available in uss.
I tried

Code (csharp):

1.  
2. background-image: img;
3. background-image: img.png;
4. background-image: 'img';
5. background-image: 'img.png';
6. background-image: "img";
7. background-image: "img.png";
8.  

But it has no effect.

I get a log message: 'Invalid value for image source String'
But I have no idea what exactly I can use there, if not String

 

I apologize. I decided it.

background-image: url('img.png');

 

can i use unity internal icons like icons/packagemanager/dark/installed.png?
What i want to do is something like this below but it will not work...

Code (CSharp):

1. .test {
2.     background-image: url('/icons/packagemanager/dark/installed.png');
3. }
4.  

 

If you're using sprites, you are pretty much SOL on documentation.

This is the first topic that comes up in a web search for setting an 'active' class via USS is non existent as far as I can tell, so for anyone else:

Write a couple selectors like this in your USS file and then you can use the UI Toolkit editor to select the correct sprites

Code (Boo):

1. #btn-play {
2.     background-image: url('project://database/Assets/Graphics/UI%20Elements/button_play.png?fileID=-858668900&guid=54c4400b47cfc4c818fe0f8cadf63f26&type=3#button_play_0');
3. }
4.  
5. #btn-play:active {
6.     background-image: url('project://database/Assets/Graphics/UI%20Elements/button_play.png?fileID=-499776347&guid=54c4400b47cfc4c818fe0f8cadf63f26&type=3#button_play_1');
7. }
8.  

You want to avoid setting an inline value to your buttons because the :active class does not override inline styles

 

Hey everyone, so i just started with UI Toolkit and i want my button to change its image depending on whether its clicked or not to get a button clicked effect. I have two different images. The Code is very simple i guess i just clicked it together with the ui builder. The problem is that it does not change the image on the start button when i clicked it. To verify that the active state is beeing triggered i changed the font color on active too and that worked when clicked but it would not change the image. Im getting really frustrated by this, since it seems like an easy task to do. Can you help me out ?

Code (CSharp):

1. <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
2.     <Style src="project://database/Assets/UI/Screens/start_menu.uss?fileID=7433441132597879392&amp;guid=acda0890863a7e04f9b376bb1bf10cb1&amp;type=3#start_menu" />
3.     <ui:VisualElement style="justify-content: center; align-items: center; width: 100%; height: auto; min-height: 100%;">
4.         <ui:VisualElement style="height: auto; justify-content: center; min-height: 100%; align-items: center; flex-wrap: nowrap; margin-left: 0; margin-top: 0; background-color: rgba(0, 0, 0, 0); width: 50%; flex-direction: column; max-width: 400px; background-image: url(&apos;project://database/Assets/UI/UI_Assets/Wooden_UI/Wooden_UI_png/bg_01_02.png?fileID=21300000&amp;guid=707a6638b8f856c4ba111d1f899a3ebf&amp;type=3#bg_01_02&apos;); max-height: 100%;">
5.             <ui:Button text="Start" display-tooltip-when-elided="true" name="StartGameButton" class="button_color_green" style="width: 40%; height: 20%; flex-wrap: nowrap; margin-top: auto; margin-bottom: auto; background-image: url(&apos;project://database/Assets/UI/UI_Assets/Wooden_UI/Wooden_UI_png/frame_green.png?fileID=21300000&amp;guid=a93de9becdfd7454cb14729a3061c233&amp;type=3#frame_green&apos;); max-width: 300px; margin-right: auto; margin-left: auto; -unity-background-image-tint-color: rgb(255, 255, 255);" />
6.             <ui:Button text="Shop" display-tooltip-when-elided="true" name="ShopButton" class="button button_color_blue" style="width: 40%; height: 20%; margin-top: auto; background-image: url(&apos;project://database/Assets/UI/UI_Assets/Wooden_UI/Wooden_UI_png/frame_blue.png?fileID=21300000&amp;guid=035fbc8a5734c4348a2f9a2bca6fb93c&amp;type=3#frame_blue&apos;); max-width: 300px; margin-bottom: auto; margin-right: auto; margin-left: auto;" />
7.             <ui:Button text="Exit" display-tooltip-when-elided="true" name="ExitGameButton" class="button button_color_red" style="width: 40%; height: 20%; margin-top: auto; background-image: url(&apos;project://database/Assets/UI/UI_Assets/Wooden_UI/Wooden_UI_png/frame_red.png?fileID=21300000&amp;guid=70038c3175d79c44a9eaeab879aac482&amp;type=3#frame_red&apos;); -unity-slice-left: 0; max-width: 300px; margin-left: auto; margin-right: auto; margin-bottom: auto;" />
8.         </ui:VisualElement>
9.     </ui:VisualElement>
10. </ui:UXML>
11.  

Code (CSharp):

1. #StartGameButton {
2.     background-image: url('project://database/Assets/UI/UI_Assets/Wooden_UI/Wooden_UI_png/frame_green.png?fileID=2800000&guid=a93de9becdfd7454cb14729a3061c233&type=3#frame_green');
3. }
4.  
5. #StartGameButton:active {
6.     background-image: url('project://database/Assets/UI/UI_Assets/Wooden_UI/Wooden_UI_png/frame_green_dark.png?fileID=21300000&guid=8ff69bed62438054fbf39db12e0a5bdf&type=3#frame_green_dark');
7. }
8.  

 

@Rolfes it's most likely because you are setting the inline `background-image` in your UXML. Inline properties will override any USS styles, you must remove it in order to accomplish what you are trying to do

 

yes thanks! i read your post yesterday again and after looking into the post i made i saw that there was still an inline style. Had to delete it by pressing unset on the property

 

Is there a clever way that one use the mono script to load images and call them in the USS for reference ??

 

You can set the background image to a texture in code my modifying the element's style. Texture can come from anywhere.

 

Code (CSharp):

1.  
2.  
3. VisualElement burgerImage = new VisualElement();
4.         VisualElement lableBurger = new VisualElement();
5.  
6.         Label burgerLabel = new Label();
7.         burgerLabel.text = "Buger"; // setting text
8.    
9.         burgerLabel.AddToClassList(textLabelStyle);                    
10.         burgerImage.AddToClassList(styleBurger); // using unity Css or USS
11.         lableBurger.Add(burgerLabel);
12.         scrollView.Add(burgerImage);
13.         burgerImage.Add(burgerLabel);

WHAT PROPERTY CAN I ADD IN A VISUAL ELEMENT TO ADD IMAGE TO IT

 

Code (CSharp):

1. var displayTexture = new Texture2D(width, height,TextureFormat.RGB24);          
2. myElement.style.backgroundImage = displayTexture;
3.  

 

I need to put Images( these are in jpg as well sprite format ) from resources folder under my assets,adding a texture does not help in adding the image on the visual element , as the data types are inconsistent..

Btw thx for replying !!

 

Create a style in ui builder, add your image as background to a class selector then use that class on your ui element.

 

That is what I do not want as my images are not suppose to be static ,but dynamic !!

i have actually figured out a clever way to do that , thx all for help !!
Closing this ..

 

You can put stylesheets in the resources folder and change of class or stylesheet depending on your needs. If you are using uploaded images then it's another story. It's not a good practice to change style directly from code or by using style="", it's better to swap classes.

 

Web Api Call are involved so using style in code !! , don't see how using style in code for background images in script is a bad idea , pls do let me know with a remedy where i can hot upload my images without using USS !!

 

This was a Good One !! thx

 

If you are using uploaded images then it's another story. I thought I mentioned that somewhere.