Custom Collection, how to close the gap between nav bar and custom collection?

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.

Do you have any CSS already settled?

I assume there’s a height on that nav bar and you can tweak around it.

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”);
}

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.

Okay thanks, i’ll try this and see👍

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.

.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 */
}
2 Likes

Yeah! Glad it worked!

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)

2 Likes