Problem about the url for a image used as background for a button

Help & Support
1

Hi folks,
I got a problem about CSS button background image.
Basically I wanna use a image as a button’s background.
In CSS, it goes like

.footerFunctionButton{
  background: url() 0 0 transparent;
  border: medium none !important;
  width: 150px;
  height: 150px;
  color: transparent;  
}

My image, 1.png, actrually goes here

1212×262 21.4 KB

I’ve put 1.png in different directories and tried

  background: url('../1.png') 0 0 transparent; 
  background: url('/1.png') 0 0 transparent;
  background: url('1.png') 0 0 transparent;

None of them works…
Then I tried,

var assets = app.assets.find("1.png");
var img = "<img src='" + assets[0].getFileUrl() + "'>";

This time it gives me the url like this,

/api/assets/files/1.png?id=8171707&t=99a847240ce7fd91c0af84148b0b7e15

I know it works, but I have no idea if it is the correct way to get the url, and can work all the time…
How can I refer the image correctly in CSS in playcanvas
Anyone can help plz?

2

Calling asset.getFileUrl() is the correct way to get the URL of an asset.

1 Like
3

Is it still correct if I put my game on the self host server?

4

Yeap should be fine.

5

Is there another way to set the correct url instead of finding it ?
For example, I put 1.png in the root dirctory like the second pic shows,
so the correct url might be

/1.png

In other words, I want the correct path about 1.png in my application

6

You need to call asset.getFileUrl()

7

If you want to use asset URLs in CSS one way to do this is to write a special string for each URL instead of the actual URL and then in your code replace those strings with the actual asset URLs. E.g.

background: url([asset.tag]); (where tag is a tag you added to the asset in the Editor)

Then in your code find all strings that look like [asset.tag] and replace that with the asset that you get by getFileUrl()

8

Yes, this is what I’m doing now, but probably it is not really good.

The thing is, I put 1.png in the directory, and of couse I know where it is, but I don’t know what the correct relative path for it.
Because of this, my program got to find it and then set it when running .

If I know the correct relative path at the beginning and set it in the button CSS code, it will be much better.

9

The folder structure you see in the Editor is not the real structure of the assets. The only way to know the real URL of an asset no matter where your application is running from is to call asset.getFileUrl(), so the way you’re doing it is your best bet right now.

10

I see. Thx very much, vaios.

11

Hi - would I need to put the var assets and var images in to a ui.js file?

I’m attempting to do my UI with HTML & CSS and trying to use svg backgrounds in my css. I’ve got the HTML and CSS showing in my game debug URL, but I’m unclear where to place the var assets and var images code. Thanks so much for any info :pray:

Editor…which has now completely broken the published version after I’m trying this lol https://playcanvas.com/editor/scene/1048418