Goodday friends… Kindly help, I found a howe to on this community to create a background for my app and did exactly that. I have a template column setup with the following text refrenced to a picture for the background (url) ; Using richtext I have the template column value and the top of the screen. I’d like the background to not move or scroll with the text. What should I adjust?

Has your problem been resolved? I think it’s best to just replace margin-top with a -100vh, considering the differences in screen proportions.

It seems not found in the CSS library, you try the following thread: [image] Enlarge an image Ask for Help If on a paid plan you could use this css to make an image full screen. Set the background of a container with an image. .full-container { height: 100%; }

This has been discussed. I couldn’t find the thread. Try adding position: fixed;. .full-container { position: fixed; height: 100%; }

I think the solution that @Himaladin suggested can work but you may need to careful of the background image choice if you plan to use multiple containers. You would want it to appear seamless… I haven’t yet seen a solution that can be used on the screen itself rather than on the containers.

I found a way. Here you need to add the class name “backg” in the top component, call it empty component. Then you need to adjust margin-top to pull all the components below it up to the top to overlap your background space. Good luck for you. .backg { position: sticky !important; top:0px; width:100%; height: 100vh; margin-top:-100vh; background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSkyq5M9l9X5QDHKbR1Pv78y0NTOydF-M9PWg&s'); background-size: cover; background-repeat: no-repeat; background-position: center; }

wonderful! :smiling_face_with_three_hearts:

Since I wanted this to be the background even of other containers as follows ; [Screenshot 2024-08-08 115651] Do I replace the previous code with the new one in a template column as before or is there another I way I should go about it? So far I have tried replacing the code and using richtext component but it didnt work

[image] Custom CSS | Glide Docs Customize the way your app looks with CSS.

I didn’t quite catch what you want. In the new Glide, you can apply a background to all components within a container, and it will be localized to that container. The code I provided above is for a fixed background that won’t scroll with the screen. Additionally, the use of CSS in the new Glide has changed. You can no longer use the rich text component to customize existing components. Customization can be accessed at: Settings > Appearance > Custom CSS. [image]

In the screenshot below, i actually have a richtext bringing in the wood texture background you see and it works well as other containers are a layer above that background [Screenshot 1] The problem comes when i try to scroll downwards the word texture background disappears, as you can see in the next screenshot below… I’d want the wood texture background to stay in place regadless of any scrolling done [Screenshot 2]

App background help

Ask for Help

Himaladin August 7, 2024, 3:50pm 3

It seems not found in the CSS library, you try the following thread:

Topic		Replies	Views
Background Image for entire page - workaround Ask for Help custom-code	10	290	August 17, 2024
How to add images to the full screen background Ask for Help	10	2069	September 9, 2023
Pages background image, How to make it static Ask for Help	5	382	January 31, 2023
Component background color Feature Requests	28	3268	October 20, 2021
How to move this text on top Ask for Help	0	156	December 28, 2022

App background help

Related topics