Background Image doesn't fill scolled form

1

When adding a background image either to the project or a form, the repeating image fills the visible portion of the browser screen. My form is longer than the screen, so when the user scrolls down, the background image does not show in the newly shown area of the form.

When I tried this in a simple HTML file setting a style for the body like:

body {background-image: url('BehindBars.jpeg'); background-size: 100%;}

The entire body of the page is filled with the repeating image. How do I make that happen in AppStudio?

2

You could do it in code with something like this:

document.body.backgroundImage = url("BehindBars.jpeg");
document.body.backgroundSize = "100%"
3

I think you meant:

document.body.style.backgroundImage = url("BehindBars.jpeg");
document.body.style.backgroundSize = "100%"

The first line errors with url is not defined. The second seems to set the property correctly. The backgroundImage starts as inherit, and after assignment, which does not error, it’s still inherit.

I don’t care if the image is attached to the body or to the one form I have - I would just like a solution :nerd_face:

4

Sorry - try this:

document.body.style.backgroundImage = "url('BehindBars.jpeg')";
5

Thanks, yes that sets the property correctly. However, the background is still white. Inspector shows:

@media (prefers-color-scheme: light)

which is line 1 of asStyle.css -

Turning this property off in the Elements, Styles list of inspector does the job. Is there a way to remove/set this differently in AppStudio, or should I just add some more code?

PS - the scrolled screen is filled with the repeating image now. :cowboy_hat_face:

6

Here’s how I solved that problem:
Code:

document.body.style.backgroundImage = "url('Images/BehindBars.jpeg')";
document.body.style.backgroundSize = "50%"

CSS

@media (prefers-color-scheme: light) {html {background: none !important; color: black;}}
@media (prefers-color-scheme: dark) {html {background: none !important; color: white;}}

In my case, the background is better at 50%. You can really see she is behind bars :policeman:

BehindBars
BehindBars1024×682 102 KB

The !important setting is probably not needed, but to be sure it’s applied I added it.