How to style the Standard Page - background image and transparency

Anvil Q&A
1

Hi,
How are you?

Want I want to learn how to do is: add background images and transparency to the page itself and to the different components on it.

I’ve found other posts that say that for doing certain things you need to use a custom page, but this implies that you know HTML and CSS, which I don’t. (one of the reasons I’m loving Anvil)

I’ve tried several modifications to the .css file of the theme, but got no results at all.
The standard-page is not an html page in which you can happily set the background-image property and see it displayed. (as you probably would do in a plain HTML page)

So, I would really appreciate advice on this. Particurlarly on how to achieve the background image and transparency stylings.
I’ve already read the tutorials on css styling and the Material Design, but I’m still unable to see any changes on the page.

Update: I also tried to reproduce exactly what is done in the Simple Web Page example, creating a role and assigning it, but the image resists to show. :smiling_face_with_tear:
Apparently I cannot add a column panel outside the one that is already given with the theme because I used the Material design. I don’t know if that might have something to do with the image not displaying.

Lost (me … not the series :wink:)

Here is the app in case you want to try to spot where the problem could be. It is just a barely improved version of one of the tutorials.

Thank you very much!!
Warm regards
Ricardo

2

Adding background is easy but only if your Main page is the standard page form with menu band. All you need to apply to it, is only to this:

First load your Background to Assets:
image

To you standard page CSS add:

<style>
body {
  background-image: url('_/theme/background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}
</style>

image
image1884×590 113 KB

I’m using material design 3 and I don’t have any problems with it.

I’m not sure how you could add it to the page in anvil without HTML. It would be possible maybe to add it to some component as a role, but don’t do that. It would cause strange appearing of the image miliseconds after the form was loaded.

Transparency is other thing. You need to add roles on the objects that you are showing with transparency CSS:

Just transparency:

.transparent-element {
  opacity: 0.5; /* 50% transparency */
}

Transparency with red color: (last 0.5) = 50%

.transparent-element {
  background-color: rgba(255, 0, 0, 0.5); /* Red color with 50% transparency */
}

In Anvil for example. **.anvil-role-**YourDesiredName

.anvil-role-transparent-element {
  opacity: 0.5; /* 50% transparency */
}

then:
image
image
image

But keep in mind. If you use a specific role for a column panel. You need to create a new role. That contain all previous formatting + opacity.

3 Likes
3

It worked!!!
So simple, so effective.
I’d seen the Style block before, it was just that I didn’t know where to put it, and you made it crystal clear.

Thank you so much!!
Warm regards!!

1 Like
4

Thanks for this suggestion. It does work well with the material design theme. Does anyone know why it does not work for a blank page form?

5

I’m not super sure how they got this to work with pure css (but I’m bad at css and better at js). However, you can do this with a bit of jQuery in the show event:

# I always import jQuery as jq for simplicity
from anvil.js.window import jQuery as jq
jq(get_dom_node(self)).css("background-image", "url('_/theme/bird flap.jpg')")

Also, its important to note, you need to have a component on the blank page for the background to show up. That’s why I added a really tall column panel so you could see that the background image is actually there.

Clone:

1 Like