Is there a creative way to customize the background of a page with an image? I know that you can use a BG image in a custom container, but sometimes I have multiple custom containers on a page, and I’d like the entire BG to be something other than dark/light/accent. CSS for this?

.backg { position: sticky !important; top:0px; width:100%; height: 100vh; margin-top:-90%; background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSkyq5M9l9X5QDHKbR1Pv78y0NTOydF-M9PWg&s'); background-size: cover; background-repeat: no-repeat; background-position: center; } [image] CSS Library [image] Custom CSS | Glide Docs Customize the way your app looks with CSS.

Thank you, i’ll give it a try!

where exactly do i put this css tho? I put it in the Appearance area, and nothing happened. :confused: [Screenshot 2024-08-16 at 3.06.15 PM]

here is the explanation from the source of that code. @Himaladin [image] App background help Ask for Help 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.

You have to add a component to the screen and name its CSS class “backg”. [image] Then make sure you turn this on. [image] [image] Make sure you use an image with enough quality for both mobile & desktop devices.

I really appreciate your help. It mostly worked, but the BG is now pushing the elements down when viewed in a mobile. Is this fixable?

This has been discussed in the thread provided by @Sekayi_Liburd, if you scroll to the end of the thread. Just change your margin-top to -100vh

You guys are the best. THANK YOU!!! It’s looking amazing now. [Screenshot 2024-08-16 at 5.28.25 PM]

I think the margin-top size should be reduced by the height of the top bar by about 14px, so it becomes: margin-top:calc(-100vh + 14px);. Please adjust it yourself.

Background Image for entire page - workaround

Ask for Help

Sekayi_Liburd August 16, 2024, 11:43pm 5

here is the explanation from the source of that code. @Himaladin

Topic		Replies	Views
App background help Ask for Help	19	350	August 8, 2024
How to move this text on top Ask for Help	0	156	December 28, 2022
How to add images to the full screen background Ask for Help	10	2069	September 9, 2023
Full screen image Ask for Help custom-css	9	820	April 21, 2024
Component background color Feature Requests	28	3268	October 20, 2021

Background Image for entire page - workaround

Related topics