How would one overlay one image over another in Quest 5.4?

For example, say you have a "frame" image background for your room, and you have a character image with a transparent background that you want to put on TOP of it.

Background


Foreground


Overlayed


I have tried using CSS positioning but it moves every time you resize a window or scroll.

How would one do this?

I couldn't say something about CSS at the moment but why are you not using just 2 different pictures (pic1 and and pic3 of your post)?

Pertex wrote:I couldn't say something about CSS at the moment but why are you not using just 2 different pictures (pic1 and and pic3 of your post)?

Maybe because he wants to have more than one thing in the picture at a time and having all the combinations would considerably increase game size and display script complexity?

Unfortunately I can't offer much help on this except to tell you to check the game default CSS in playercore.css, maybe that will help you figure it out.

I ran into a similar position myself, with absolute positioning. The problem is that Quest keeps the window content centered, so as you resize the window, things move around. If you position absolutely, then it won't move while the rest will.

I haven't tried this myself (I haven't solved my problem yet, but my case is more static). However, this really an HTML/CSS problem, so you have the resources of the internet at your disposal. Here is one example:

http://stackoverflow.com/questions/2835 ... ther-stuff

So, I managed to kind of get it working using CSS fixed positioning.

<img id="charImg" style="position:fixed; top:34px; left:18%;" src="quest://local/BusisnessMan.png">

(Your mileage may vary with those specific numbers)

And some JavaScript to hide it when it's done.

function removeCharImg() {
	element = document.getElementById("charImg");
	element.parentNode.removeChild(element);
}

It's far from perfect, though. It still moves when the window is resized but it's workable.

If the "frame" image for a room was in its own <div> with its own ID/class this would simply be a matter of using CSS multiple backgrounds capability. But alas, it is not. In a future version, perhaps?

I have come across another problem in using this method, though. The quest URL for the image (quest://local/BusisnessMan.png) works fine when playtesting locally, however it does NOT translate properly into the online player. Does anyone know how to use images in html and have them work properly in the online player?

I think this will help http://quest5.net/wiki/GetFileURL