Setting a background image for my project

It would be useful to see your Hype project to provide the quickest most accurate answer.

What are You attempting to create?
• A unique image for every scene or
• A background for the whole project

Do You want this image to fill the whole viewport or just the scene itself?


General Code ideas for unique (or identical) background scene images
could be triggered by “On Scene Load” handler


Fills just the Scene itself (as @MarkHunte wrote above):

hypeDocument.setElementProperty(element, 'background-image', "${resourcesFolderName}/myImage.jpg");
element.style.backgroundSize = element.style.width + " " + element.style.height;


Fills entire viewport

document.body.style.background = "url('${resourcesFolderName}/myImage.jpg') no-repeat center fixed";
document.body.style.backgroundSize = "cover";


OR for the same image for the whole project (fills viewport)
place this script in the Head of your project (thanks @Daniel for this code)

<style>
	html { 
	  background: url('${resourcesFolderName}/myImage.jpg') no-repeat center fixed; 
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;
	}
</style>

==========================

Separately @Daniel

I noticed there are quotes missing for the ${resourcesFolderName}/myImage.jpg on the “Modify Background Color or Image…” thread (also I think we only need one “center” specified, not two):

1 Like