What is the easiest way to set background-image in a specific object?

Getting Started
1

I put a rectangle on a scene and want to set background-image to it.
Is it the best way to do it to use id for the div in style tag in inner HTML?
Do the ID for the div vary everytime I preview or export?
Or are there any easier ways in UI ?
I think this is relatively important knowledge in accessing the doms exported by TumultHype.

2

one way is to use the UI. select the rectangle, do to background in the inspector, choose image ... :slight_smile:

1 Like
3

thank you !!
Now I've set bg to the element and it's been exported to a div which have many inline styles Hype automatically generated. Then I want to change its inline style a bit and create a JavaScript function like below as On Scene Load event action. But it didn't work. How can I edit or overwrite the inline style which Hype generated ? Any other better way?

function changeBGsize(hypeDocument, element, event) {
	let myDiv = hypeDocument.getElementById('mypic');
 	console.log(myDiv);
 	hypeDocument.setElementProperty(myDiv, 'background-size', 'contain');
}
4

I would choose classes:

Add a class name using the UI
Select your picture by class and add/remove classes, which affect the bg size:

	myPic = document.querySelector ('.dino');
	
		if (myPic.classList.contains ('contain')) {
		
			myPic.classList.remove ('contain');
		}
	
	myPic.classList.add ('cover');

In the head-HTML:

<style>

.cover {
	background-size: cover !important;
}

.contain {
  background-size: contain !important;
}	

</style>

changeBgSize.zip (338.1 KB)

3 Likes
5

Note if you mean you only want to change the style and not toggle as in the code example from @ktewes above then
just put the css in the head-HTML as above and use which ever properties you need as shown.

And give the element a class name.

Class names are a bit better due to they can be used with many elements at once but ids can be used.

i.e

Class name

.contain {
  background-size: contain !important;
}

or

id

#mypic{
  background-size: contain !important;
}

You should see css changes like this directly in Hype without having to preview.

4 Likes
6

thank you for this comprehensible hints and sample file.Now I understand I change the inline style with the "!important" style in head tag not editting the inline style itself.

2 Likes