Setting a background image for my project


(Steve Williams) #1

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


(Mark Hunte) #2

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:


(Steve Williams) #3

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