Problem displaying a background image in a Custom HTML form

Anvil Q&A
1

What I’m trying to do:

I just wanted to test in a simple app how to use a background image as my app’s main form.

What I’ve tried and what’s not working:

I followed several posted messages in this Q&A forum viz:

Here are the steps that I followed:
I uploaded a simple jpg image to the Asset of Anvil’s test app.
I created a Form using the Custom HTML design and then put the following codes on the custom.html asset.

<style>
body {
    background-image: url("_/theme/corn.jpg")
    background-repeat: no-repeat
  }
</style>

I then looked in the property for custom html, clicked the pencil icon, got a prompt to insert the above codes in a specific section of the Form. The following codes got inserted in the Form:

<center style="font-style:italic; color:#888; margin: 3em;">
<style>
body {
    background-image: url("_/theme/corn.jpg")
    background-repeat: no-repeat
  }
</style>
</center>
<div anvil-slot="default"></div>

I then tested the app but the corn.jpg image would not appear in my Form.
I tried to modify the body element - with and without the dot - same result-- the image would not display

Basically, I followed everything to the letter except changing the image to “corn.jpg”.

Any thoughts why?
Would greatly appreciate help.
Thank you.

Code Sample:

# this is a formatted code snippet.
# paste your code between ```

Clone link:
share a copy of your app

2

Hi @koollucian.2012,

It looks like you are missing a semi-colon at the end of your first line of CSS. Your code should work fine if you fix that.

<style>
body {
    background-image: url("_/theme/corn.jpg");
    background-repeat: no-repeat
  }
</style>
2 Likes
3

Thanks @brooke. I actually tried the semi-colon after I posted the message based on another post but same result - no image.

4

try also adding the background-size property


body {
    background-image: url("_/theme/corn.jpg");
    background-size: cover;
    background-repeat: no-repeat
}
6

Thank you @stucork

I added your suggested code but still no luck.

I am posting here a link to this simple test app in case someone can find what’s weirdly wrong with the way I created tha app.

Thank you.

7

You’ve got the file path wrong

your file is corn.jpeg rather than corn.jpg

1 Like
8

Oh, yes!
Thank you for pointing this silly mistake. I should have been more of a sharper sleuth.

So, it is all done.

1 Like