Setting a background image for my project

Hi, Sorry this may be obvious, but I just can’t seem to get this right. I want a background image for my whole project, rather than a colour, but can’t seem to find an option for this. I have found the following in the documentation


Using an Image for your Background

Keep in mind that you can change the background image of your scene directly in Hype in the scene inspector – the instructions below sets the background for your entire .html document.


It says I can change the background image directly in Hype, but I can’t find this option. I am assuming it should be in the same place as background colour.
As I can’t find this, I am instead creating a persistent symbol on each scene for a background image, but for some reason it doesn’t seem to load on each scene. It’s fine in preview, but not when I export it.
Am I missing something obvious? I have nearly finished my project, but need to sort this first! Any help is much appreciated!
Steve

Hmm… not sure this has ever been the case. I only know you can do it for elements.

You could though add something like this to your head. ( There most likely is a direct css trick way to do this… )

For many scenes and different images.

<script type="text/javascript">
 
 
 	function loadBG(hypeDocument, element, event){ 
 

  		var scname = hypeDocument.currentSceneName()
  		
  		var sceneElement;
 //-- get current scene
 var hypeContainer = document.getElementById(hypeDocument.documentId());
    var scenArray = hypeContainer.getElementsByClassName("HYPE_scene");
    for (i = 0; i < scenArray.length; i++) {
        if (scenArray[i].style.display === "block")  sceneElement = scenArray[i];
    }
  		
  		
		switch(scname) {
    case 'Scene1':
   sceneElement.style.backgroundImage = "url('${resourcesFolderName}/bg_mainImage_1.png')" 
      sceneElement.style.backgroundRepeat = "no-repeat";  
     sceneElement.style.backgroundColor = "#000000";
     sceneElement.style.backgroundSize =  "100% 100%" ;
   
        break;
    case 'Scene2':
           sceneElement.style.backgroundImage = "url('${resourcesFolderName}/bg2.jpg')" 
      sceneElement.style.backgroundRepeat = "no-repeat";  
     sceneElement.style.backgroundColor = "#000000";
     sceneElement.style.backgroundSize =  "100% 100%" ;
        break;
    default:
         
}

All scenes

	<style>

.HYPE_scene {
      background-image: url("${resourcesFolderName}/bg_mainImage_1.png")!important; 
      background-repeat: no-repeat!important;  
      background-color: #000000!important;
      background-size: 100% 100% !important; 
    }
	</style>

whole body
You set the Scene/s background to transparent in the Document inspector

05

Then this in the head

	<style>

body {
      background-image: url("${resourcesFolderName}/bg_mainImage_1.png");  
      background-repeat: no-repeat;  
      background-color: #000000;
      background-size: 100% 100% ; 
    }

</style>

Also as I have just been reminded that background images can be set by the Hype API.

Using the GUI of Hype you can run a function on scene load with:

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

Thanks @DBear for the reminder :+1:

3 Likes

Thank you Mark for your quick response. I really appreciate your help. I will try this with a blank document before making changes to my project!
Again, Many thanks
Steve

2 Likes

I’m trying to use this script to use a background image, but the images aren’t appearing. Any ideas?

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