Setting a background image for my project

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:

3 Likes