# Custom Collection, how to close the gap between nav bar and custom collection?
**URL:** https://community.glideapps.com/t/custom-collection-how-to-close-the-gap-between-nav-bar-and-custom-collection/79531
**Category:** Ask for Help
**Created:** [January 25, 2025, 11:15pm UTC](https://community.glideapps.com/t/custom-collection-how-to-close-the-gap-between-nav-bar-and-custom-collection/79531 "2025-01-25T23:15:11Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@ToOFa\_Apps](https://community.glideapps.com/u/ToOFa_Apps)
#### Post date: [January 25, 2025, 11:15pm UTC](https://community.glideapps.com/t/custom-collection-how-to-close-the-gap-between-nav-bar-and-custom-collection/79531/1 "2025-01-25T23:15:11Z")
I have this gap here which doesnt look nice. Typically you would see this because the background of a custom collection is not editable. But i have put a image as a background for my custom collection. There is this unwanted gap between the custom collection and the nav bar. Could someone help with CSS to close that gap.
---
### Author:  [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [January 26, 2025, 12:04am UTC](https://community.glideapps.com/t/custom-collection-how-to-close-the-gap-between-nav-bar-and-custom-collection/79531/2 "2025-01-26T00:04:15Z")
Do you have any CSS already settled?
---
### Author:  [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [January 26, 2025, 12:25am UTC](https://community.glideapps.com/t/custom-collection-how-to-close-the-gap-between-nav-bar-and-custom-collection/79531/3 "2025-01-26T00:25:09Z")
I assume there’s a height on that nav bar and you can tweak around it.
---
### Author:  [@ToOFa\_Apps](https://community.glideapps.com/u/ToOFa_Apps)
#### Post date: [January 26, 2025, 12:28am UTC](https://community.glideapps.com/t/custom-collection-how-to-close-the-gap-between-nav-bar-and-custom-collection/79531/4 "2025-01-26T00:28:41Z")
I have the CSS: imgcc and backimgcc which changes the images on the card and on the background. But i don’t believe that the CSS is the cause of the gap, i think the gap is not typically visible because the custom collection is typically white. The image background needs to reach up to the nav bar, but it seems the custom collection is set away from the nav bar.
Here is the CSS for the image background:
.imgcc section \> div \> div \> div {
background-image: url(“imageURL”);
background-color: rgba(22, 255, 255, 0); /\* White semi-transparent overlay _/
background-blend-mode: overlay; /_ Blends the overlay with the image _/
border-radius: 12px; /_ Optional: Rounds corners for a polished look \*/
}
.backimgcc {
background-image: url(“imageURL”);
}
---
### Author:  [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [January 26, 2025, 1:18am UTC](https://community.glideapps.com/t/custom-collection-how-to-close-the-gap-between-nav-bar-and-custom-collection/79531/5 "2025-01-26T01:18:46Z")
Try to add:
`background-size: cover;`
[The `cover` value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container. Try resizing the example below to see this in action.](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images#cover)
---
### Author:  [@ToOFa\_Apps](https://community.glideapps.com/u/ToOFa_Apps)
#### Post date: [January 26, 2025, 2:03am UTC](https://community.glideapps.com/t/custom-collection-how-to-close-the-gap-between-nav-bar-and-custom-collection/79531/6 "2025-01-26T02:03:09Z")
Okay thanks, i’ll try this and see👍
---
### Author:  [@ToOFa\_Apps](https://community.glideapps.com/u/ToOFa_Apps)
#### Post date: [January 26, 2025, 2:21am UTC](https://community.glideapps.com/t/custom-collection-how-to-close-the-gap-between-nav-bar-and-custom-collection/79531/7 "2025-01-26T02:21:12Z")
> [@MaximeBaker](#):
>
> background-size: cover;
Works great. You pointed me in the right direction. I did run it through Chat Gpt to test and it tweaked my original code - this stops the image from tiling if the image is too small etc. I’ll add the CSS below. Thanks again.
```auto
.imgcc section > div > div > div {
background-image: url("Add your imageURL");
background-color: rgba(22, 255, 255, 0); /* Semi-transparent overlay */
background-blend-mode: overlay;
border-radius: 12px;
background-size: cover;
background-position: center; /* Centers the image */
background-repeat: no-repeat;
/* Move the image up */
margin-top: 40px; /* Adjust as needed */
}
.card-container {
position: relative; /* Ensures control over its positioning */
margin-top: 0px; /* Moves the card down slightly */
}
.backimgcc {
background-image: url("Add your imageURL");
background-size: cover; /* Makes the image scale to cover the container */
background-position: center; /* Centers the image */
background-repeat: no-repeat; /* Prevents image repetition */
}
```
---
### Author:  [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [January 26, 2025, 2:28am UTC](https://community.glideapps.com/t/custom-collection-how-to-close-the-gap-between-nav-bar-and-custom-collection/79531/8 "2025-01-26T02:28:42Z")
Yeah! Glad it worked!
---
### Author:  [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [January 26, 2025, 7:02am UTC](https://community.glideapps.com/t/custom-collection-how-to-close-the-gap-between-nav-bar-and-custom-collection/79531/9 "2025-01-26T07:02:16Z")
To get nicely formatted CSS/JavaScript/etc, include a single line above and below with three backticks, like so:
(I applied that to your last reply)