# Full screen image **URL:** \ **Category:** Ask for Help\ **Tags:** custom-css\ **Created:** [April 18, 2024, 7:31pm UTC](https://community.glideapps.com/t/full-screen-image/72708 "2024-04-18T19:31:59Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\ **Post date:** [April 18, 2024, 7:31pm UTC](https://community.glideapps.com/t/full-screen-image/72708/1 "2024-04-18T19:31:59Z")
Hi, I’d like to have a whole full screen image of my app ‘homepage’, not as a background but as an image that extends to the bottom of the screen with some buttons on it. ‘Title’ and ‘Container’ are both quite small, even set to maximum height, and image has a white border around it which looks incongruous with the rest of my content. Id like to achieve something like the [BSAC](https://www.bsac.com) website (on mobile renders as an image with three buttons), without the snazzy video / image changing just a static image. I am assuming I can use CSS to either extend the height of the title or remove the border on the image but can’t find any examples of this and haven’t used CSS before - any examples / walkthrough of this? Thanks! ---
**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:** [April 19, 2024, 12:49am UTC](https://community.glideapps.com/t/full-screen-image/72708/2 "2024-04-19T00:49:44Z")
![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/6/76321d3a5571a72fa32eccb8d8261889014befde.jpeg) Here’s my attempt. Components: Rich text: `
` Container: class name - `fixed` contains the rich text and button block below. Rich text: ```auto

Welcome to Brooklyn,

you finally arrived.

``` Button block: Whatever you want. CSS: ```auto .background { position: fixed; margin-top:0; width: 100%; height:100%; top:0; right:0; left: 0%; z-index:-100; filter: brightness(70%); background-image: url("https://images.unsplash.com/photo-1555586134-7c18af2c7854?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=668&q=80"); background-size: cover; background-position: center center; } .fixed { bottom: 0; left: 0; right: 0; z-index: 1999; position: absolute; } div[class*="mobile-tab-bar"] { display: none; } ``` ---
**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\ **Post date:** [April 19, 2024, 8:11am UTC](https://community.glideapps.com/t/full-screen-image/72708/3 "2024-04-19T08:11:33Z")
Yes!! Awesome, thank you so much. ---
**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:** [April 19, 2024, 8:13am UTC](https://community.glideapps.com/t/full-screen-image/72708/4 "2024-04-19T08:13:12Z")
I will let you know if I can remove the top bar, haven’t had time to dive in more today. ---
**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\ **Post date:** [April 19, 2024, 9:22am UTC](https://community.glideapps.com/t/full-screen-image/72708/6 "2024-04-19T09:22:17Z")
this is brilliant, thanks! Having had a play, I think only two further questions: 1. Another else I put on the page is now superimposed on the background or pushes the buttons and text down rather than appearing under the image, however I rearrange the components - any way round this? 2. I see you’ve used unsplash to give a photo inc some image rendering. I want to use my own image and thing I can use cloudinary to render mine correctly - can I connect the CSS to a template column in my data? ---
**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:** [April 20, 2024, 12:14am UTC](https://community.glideapps.com/t/full-screen-image/72708/7 "2024-04-20T00:14:01Z")
> [@fraser](#): > > Another else I put on the page is now superimposed on the background or pushes the buttons and text down rather than appearing under the image, however I rearrange the components - any way round this? Can you give me a screenshot? > [@fraser](#): > > I see you’ve used unsplash to give a photo inc some image rendering. I want to use my own image and thing I can use cloudinary to render mine correctly - can I connect the CSS to a template column in my data? You can not connect it dynamically to a column, it has to be fixed in the CSS box. ---
**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\ **Post date:** [April 20, 2024, 4:08am UTC](https://community.glideapps.com/t/full-screen-image/72708/8 "2024-04-20T04:08:49Z")
I think you could just add css to the container, such as > .full-container { > height: 100%; > } Then you can select any image you want as the background of the container and use the native button bar component inside the container. ![IMG_8386](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/a/aa9beae989857449662e1af9b12a8515ad794950.jpeg) ---
**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:** [April 20, 2024, 4:25am UTC](https://community.glideapps.com/t/full-screen-image/72708/9 "2024-04-20T04:25:05Z")
That’s a much better solution. ---
**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\ **Post date:** [April 20, 2024, 9:36am UTC](https://community.glideapps.com/t/full-screen-image/72708/10 "2024-04-20T09:36:29Z")
Amazing! What a great intro to CSS, playing with all sorts of things now. ---
**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:** [April 21, 2024, 12:41am UTC](https://community.glideapps.com/t/full-screen-image/72708/11 "2024-04-21T00:41:41Z")
> [@CSS Library app by LowCode Agency](https://community.glideapps.com/t/css-library-app-by-lowcode-agency/72727): > > Hello everyone, In light of Glide allowing CSS to be used on all paid plans in latest pricing announcements, I thought it’s a good time to create a library of CSS so we can help each other make our apps beautiful. The [Notion library](https://www.notion.so/glidecommunity/33d5984960d04785b38eeae6c5121001?v=5662bb67cd994c53ae87737ab952ddb2) for the same purpose was a huge success back then. I plan to bring over many of those to this library in the coming weeks. For our completely public library, we have these features: Library: Include all items that have been approved by admins to show to the p… You can also check this resource. ---
**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\ **Post date:** [April 28, 2024, 12:42am UTC](https://community.glideapps.com/t/full-screen-image/72708/12 "2024-04-28T00:42:39Z")
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.