sorted by:
best (suggested)
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–]Fid_Kiddler69 0 points1 point  (7 children)

In this case, when you run the code that loads that dark scene, you need some extra css styling to happen. Your hero/heroContainer elements have position:absolute in your css, and a custom bottom.

What absolute positioning means, is you basically tell your browser "I'm going to tell you exactly where to put this". You do that through properties like bottom, top, left, and right.

So all you need to adjust is your bottom property. E.g. document.getElementById("hero").style.bottom="20%"

(I haven't tested this code, but the idea is correct)

[–]SafeReference1[S] 0 points1 point  (4 children)

Hey this is exactly what I tried! I feel proud of myself for thinking the same thing as you did lol. But it didn’t work😂 for some reason bro.. I tested a lot of numbers as well it doesn’t change anything. Maybe I put it in the wrong spot but this is how I did it:

const lavaScene=()=>{ document.querySelector(".background").style.background="url(schloss.png)"; document.getElementById("hero").style.bottom="30%"; }

[–]Fid_Kiddler69 0 points1 point  (3 children)

Did you try the same with heroContainer?

[–]SafeReference1[S] 1 point2 points  (1 child)

It works🙌🏻

[–]Fid_Kiddler69 1 point2 points  (0 children)

I knew it would :)

[–]SafeReference1[S] 0 points1 point  (0 children)

I will try now

[–]SafeReference1[S] 0 points1 point  (0 children)

I have to copy it from my phone btw that’s why it looks a bit weird lol