The apple image appearing
1 Like
Hmm… it seems backgroundImage actually does work as well as ["background-image"], I didn’t know that, and adding the quotes in url doesn’t matter at all since the browser can do it automatically.
Adding a z-index of anything within the developer tools (which brings it to the front) shows a red circle, which means it’s displaying everything correctly except for the image.
Edit: Actually, if you comment out the edit("backgroundImage") part everything else works fine and you see the red circle at a random position.
Finally figured it out! It’s nothing to do with the JS, and everything to do with the CSS. Your image is 2000x2000 pixels, and for whatever reason, by default background images don’t scale to the size of the element they are the background for. So your image is actually so massive that all you see is the white around the apple which obscures the rest of the content of the page as well (edit: actually it’s probably clipped to only show where it’s within the div). To fix this, set the background-size/backgroundSize property to contain and this will make the image display.
As weird as it is, I had fun working this one out lol 
2 Likes
Js supports “-” syntax like css? I thought js only supports camelCase syntax
1 Like
That worked beautifully. Thank you
1 Like
You can select it as answer if it solevd your issue
2 Likes
The - syntax is the actual CSS property, I’d assume the camel case is an alias since you can’t use a hyphen with a dot accesssor.
1 Like
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.