Full screen image

[fraser]

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 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!

[ThinhDinh]

Here’s my attempt.

Components:

Rich text: <div class="background"></div>

Container: class name - fixed contains the rich text and button block below.

Rich text:

<center><p style="font-size: 20px; color:white"><b>Welcome to Brooklyn,</p>
<p style="font-size: 20px; color:white"><b>you finally arrived.</p>

Button block: Whatever you want.

CSS:

.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;
}

[fraser]

Yes!! Awesome, thank you so much.

[ThinhDinh]

I will let you know if I can remove the top bar, haven’t had time to dive in more today.

[fraser]

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?

[ThinhDinh]

@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.

[Joe_Gabriele]

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.

[ThinhDinh]

That’s a much better solution.

[fraser]

Amazing! What a great intro to CSS, playing with all sorts of things now.

[ThinhDinh]

CSS Library app by LowCode Agency

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 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.