Modify the Background Color or Background Image of your Document


#1

When you export your Tumult Hype document and generate an HTML file, your first scene’s background color defines the color of your document. Below are a few ways to tweak the color of your document or replace that background color with an image:

Changing the Color of your Scene

To change the color of a specific scene, select a color from the Scene inspector:

The color of your first scene defines the color of the background of the exported .html document generated by Hype.

Changing the color of the background of your .HTML file

To modify the color of the .html page outside of your Tumult Hype document, you’ll need to edit the ‘head’ of your document. You can edit the contents of the <head>…</head> of your exported .html file by clicking on ‘Edit HTML Head’ in the Document Inspector. The content added in this area will override any styles (like the background color) set by default.

By default, these styles are added if your scene color on your first scene is white (the default):

<style>
	html {
		height:100%;
	}
	body {
		background-color: #FFFFFF;
		margin:0;
		height:100%;
	}
</style>

To change that color, add the following to the ‘head’ area of your Hype document. Since this CSS code is added after the exported .html code, it overrides that value:

body { background-color: red; }

This page has a list of colors.

Removing all backgrounds

Please note that iBooks author widgets cannot be transparent. They will always have a white background when the widget has been loaded.

To remove any scene or document backgrounds, check ‘Make background transparent’.

Next, add the following CSS to the ‘head’ of your document in the Document Inspector:

<style>
body {
background-color: transparent;
}
</style>

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.

If you want to use an image for the background of your .html document, you’ll need to use the background-image property. First, drag your image into your resource folder. This will make it accessible by inserting the ’ ${resourcesFolderName}/’ variable.

<style>
body { 
   background-image: url('${resourcesFolderName}/image.jpg');
}
</style>

Full Page Background Image

A common request is how to set an image to spread across the entire background of the page responsively. The CSS below also uses the ${resourcesFolderName} variable explained above, and is adapted from this URL: https://css-tricks.com/perfect-full-page-background-image/.

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

Different full page background images for each scene
Make hype scene background transparent
Persistent background dissapearing
(Michael) #2

“html” in the last example doesn’t work. Changed it to “body”.


(Arnout) #3

Draw a rectangle as big as the scenes background, and give it an id. Then in your css set the display to ‘none’ for this div. And voila; transparent background!


(Fenna) #4

Hi Daniel,

Thank you for all the clear instructions. I was able to put in a background image successfully.

However, when I add the background image it automatically adds the background image to all the scenes.
I just want to use the background image for some scenes, and for the other scenes I just want to use 1 background color.

Could you help me with this and let me know how I can achieve this?

Thanks!!


#5

On scenes where you want a Background image, set this ‘on scene load’ as a new JS function within Hype:

document.body.style.backgroundImage = "url('${resourcesFolderName}/image.jpg')";

And when you don’t want that BG image to be set, run this JS function:

document.body.style.backgroundImage = "none";

You could call these functions ‘BG On’ and ‘BG Off’ and reuse them as you want. You could also set a color using:

document.body.style.backgroundColor = "CornflowerBlue";

If you have this CSS in the Head of your document, it will be overridden whenever you run a JS function that modifies the same property background-image on the element body:

<style>
body { 
   background-image: url('${resourcesFolderName}/image.jpg');
}
</style>

Here’s an example file for switching up the background image.


(Joe Wilson) #6

Important to note that “Make background transparent” needs to be selected in Document Settings for image backgrounds to work with this method. As a non-coder that tripped me up a little following this tutorial. Otherwise very helpful, thanks!

PS - I’ve been using Hype for 1 day and it’s pretty amazing what I can already do.


(Jonathan Deutsch) #7

Good point - we changed the name of this checkbox recently from “Draw scene backgrounds” to “Make background transparent” to better clarify its purpose. I’ve edited the above screenshot/documentation.


(Rob) #8

Unfortunately the Full Page Background Image solution above doesn’t seem to work on ipads / iphones for some reason. The image is there but it’s not fixed and it’s massively oversized so that it’s height matches the whole length of the page instead of just the browser window.


(Rob) #9

After looking into this further it appears this has been a known bug with IOS for years, but hasn’t been fixed yet…

For anyone struggling with this, I found a handy solution which gives the same static background across all platforms, including IOS:

<style>
body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(${resourcesFolderName}/backgroundimage.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
</style>

The only thing to note here is that the z-index must be lower than any other z-indexes in your project. The default is 0.


#10