# Background Image for entire page - workaround **URL:** \ **Category:** Ask for Help\ **Tags:** custom-code\ **Created:** [August 16, 2024, 8:09pm UTC](https://community.glideapps.com/t/background-image-for-entire-page-workaround/75686 "2024-08-16T20:09:59Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![Zion\_Brock](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/zion_brock/32/77149_2.png) [@Zion\_Brock](https://community.glideapps.com/u/Zion_Brock)\ **Post date:** [August 16, 2024, 8:09pm UTC](https://community.glideapps.com/t/background-image-for-entire-page-workaround/75686/1 "2024-08-16T20:09:59Z")
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? ---
**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\ **Post date:** [August 16, 2024, 8:56pm UTC](https://community.glideapps.com/t/background-image-for-entire-page-workaround/75686/2 "2024-08-16T20:56:36Z")
```auto .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; } ``` > **[CSS Library](https://css-library.glide.page/)** > **[Custom CSS | Glide Docs](https://www.glideapps.com/docs/css-for-apps)** > > Customize the way your app looks with CSS. ---
**Author:** ![Zion\_Brock](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/zion_brock/32/77149_2.png) [@Zion\_Brock](https://community.glideapps.com/u/Zion_Brock)\ **Post date:** [August 16, 2024, 10:02pm UTC](https://community.glideapps.com/t/background-image-for-entire-page-workaround/75686/3 "2024-08-16T22:02:34Z")
Thank you, i’ll give it a try! ---
**Author:** ![Zion\_Brock](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/zion_brock/32/77149_2.png) [@Zion\_Brock](https://community.glideapps.com/u/Zion_Brock)\ **Post date:** [August 16, 2024, 10:06pm UTC](https://community.glideapps.com/t/background-image-for-entire-page-workaround/75686/4 "2024-08-16T22:06:56Z")
where exactly do i put this css tho? I put it in the Appearance area, and nothing happened. 😕 ![Screenshot 2024-08-16 at 3.06.15 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/e/7ecea2d56bd04194674de863b3aa02f38a54b92d.jpeg) ---
**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\ **Post date:** [August 16, 2024, 11:43pm UTC](https://community.glideapps.com/t/background-image-for-entire-page-workaround/75686/5 "2024-08-16T23:43:20Z")
here is the explanation from the source of that code. @Himaladin > [@App background help](https://community.glideapps.com/t/app-background-help/75490/16): > > 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. ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [August 16, 2024, 11:43pm UTC](https://community.glideapps.com/t/background-image-for-entire-page-workaround/75686/6 "2024-08-16T23:43:21Z")
You have to add a component to the screen and name its CSS class “backg”. ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/6/a6df3b35cfdafd80ed9f3c878fb3982dd8854558.jpeg) Then make sure you turn this on. ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/9/99fbc2369e742e50ff9e24e73ec42ddde26048ed.png) ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/c/3c3426bb5b3ba7f16058c7bbbdb0f5966917ba1c.jpeg) Make sure you use an image with enough quality for both mobile & desktop devices. ---
**Author:** ![Zion\_Brock](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/zion_brock/32/77149_2.png) [@Zion\_Brock](https://community.glideapps.com/u/Zion_Brock)\ **Post date:** [August 17, 2024, 12:04am UTC](https://community.glideapps.com/t/background-image-for-entire-page-workaround/75686/7 "2024-08-17T00:04:14Z")
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? https://www.loom.com/embed/827965c166b445f7a79202e5306c545c?sid=789eac51-6741-492e-aa31-04d7f9b97bcc ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [August 17, 2024, 12:15am UTC](https://community.glideapps.com/t/background-image-for-entire-page-workaround/75686/8 "2024-08-17T00:15:26Z")
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 ---
**Author:** ![Zion\_Brock](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/zion_brock/32/77149_2.png) [@Zion\_Brock](https://community.glideapps.com/u/Zion_Brock)\ **Post date:** [August 17, 2024, 12:28am UTC](https://community.glideapps.com/t/background-image-for-entire-page-workaround/75686/9 "2024-08-17T00:28:04Z")
You guys are the best. THANK YOU!!! It’s looking amazing now. ![Screenshot 2024-08-16 at 5.28.25 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/e/ae28f2ed0f6682834798e6a676e3f675c388b964.jpeg) ---
**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\ **Post date:** [August 17, 2024, 12:41am UTC](https://community.glideapps.com/t/background-image-for-entire-page-workaround/75686/10 "2024-08-17T00:41:47Z")
it looks great! ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [August 17, 2024, 3:10am UTC](https://community.glideapps.com/t/background-image-for-entire-page-workaround/75686/11 "2024-08-17T03:10:48Z")
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.