For those interested, through trial and error I figured out where to place the css to account for safe areas on the iPhone X. So the end result is now a full screen background image, with the content shifted downwards so it is not covered by the iPhone X notch 
. To do this, I went to “Settings”, “SEO/Metatags”, “Script in the body”, I entered the below css (with angle brackets enclosing the “style” and “/style” of course).
style
.main-page.bubble-element.Page {
padding-top: env(safe-area-inset-top);
}
.bubble-element.FloatingGroup.floating-group {
padding-top: env(safe-area-inset-top);
}
/style
I found the names of the div classes (.main-page.bubble-element.Page and .bubble-element.FloatingGroup.floating-group) by “previewing” my bubble web app in a browser, opening the web developer inspector tool found on most browsers, and hovering over the page elements. I hope this helps somebody one day