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) ;
<a style="position: fixed;
width: 100%;
top:0%;
right: 0%; z-index:-1;">
<img src="URL" /></a>
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?
It seems not found in the CSS library, you try the following thread:
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! 
Since I wanted this to be the background even of other containers as follows ;
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
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.
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
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
Yes. The code I provided is for that purpose. Have you done it?
follow the video guide that @Darren_Murphy provided above.
I have added it to the CSS panel in the appearence settings but to which element to I add the CSS class in the layout section?
In your layout, I assume you use a spacer component and place it at the top. In the options section of the component, write “backg” in the CSS class.
Don’t forget to turn off “Use compiled CSS” and turn on “Preview custom CSS” in the custom CSS settings section beforehand.
Wow, thank you so much, works perfect,
But now theres just a lot of sapce on top of everything…can it be removed?
Show with a screenshot, what space do you mean?
Has your problem been resolved?
I think it’s best to just replace margin-top with a -100vh, considering the differences in screen proportions.
Thank you so much
