How to set background image of my page using CSS

Anvil Q&A
1

Hello guys,

I am trying to set the background image of my app with CSS, using this as a guide CSS: background-image url- what folder do I use?. I have stored/uploaded the image into my app’s assets as bg.jpg. I have a custom html form and I have this as the content:

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

When I run my app, I see nothing. Assuming this worked, it would only change the background image of this particular page. I have also tried modifying theme.css file in my assets to change the background of all the pages in my app by inserting the above css code into it. It didn’t work either.

Please I need help on how to fix this. Thanks in advance.

1 Like
2

Change :

.body

to just :

body

2 Likes
3

Thanks so much @david.wylie, that was the problem.

2 Likes
4

Hey… I’ve been trying to use the knowledge from this post to set the background image of a form, with no luck… Here’ my app…

https://anvil.works/build#clone:OQYXTFVXMSST7ULV=43J6H5LW2CMY6QJVUGYRQKU6

It only has one form, “Form1”, but I’m not sure how to this all works.

5

Your form must be a Custom HTML form, and you have to put the style code in the custom HTML section.

1 Like
6

Ok, I did that, but my Form1 still isn’t rendering the image… Here’s the updated version of the app:

https://anvil.works/build#clone:OQYXTFVXMSST7ULV=43J6H5LW2CMY6QJVUGYRQKU6

1 Like
7

Initial thing - you need semicolons after each style element else they’ll be ignored.

Then add :

background-size: cover;

and voila!

It won’t cover the whole background as it isn’t big enough. You’d probably need to use a repeating texture to do that.

2 Likes
8

Beautiful! Thank you so much!!!

2 Likes