Background-position cover is clipping the bottom portion of the image

HTML & CSS
1 
.achieve_wrapper
{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  top: -3rem;
  padding: 8rem 5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position:inherit;
  background-image: url(../public/capabilities/back.png);
}

.achieve_inner_wrapper
{  
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap:3rem;
}

CleanShot 2023-12-24 at 10.54.10@2x
CleanShot 2023-12-24 at 10.54.10@2x2348×1176 214 KB

This is not happening with the other sections with the same background.

2

Isn’t that a just a problem with your image as it doesn’t fade to transparent at the end?

692×905 398 KB

Unlike this one.

https://neodonya.com/capabilities/pink.svg

3

While there is an issue with the magenta blur, I understand the main issue is that you are not getting the angle at the bottom of some backgrounds.

I suggest you dispense with the background image file and achieve black triangles above and below using this method:

That is responsive.

1 Like
4

Oops I didn’t spot that :slight_smile:

I notice in your example I get lines appearing at certain resolutions with the top and bottom clip areas.

Screen Shot 2023-12-24 at 12.10.22
Screen Shot 2023-12-24 at 12.10.221833×459 34.4 KB

Screen Shot 2023-12-24 at 12.10.05
Screen Shot 2023-12-24 at 12.10.051970×503 34.2 KB

To avoid that happening why not just clip the whole thing in one go?

e.g.

.cap_cap_wrapper__FBE_0{
background:black;
clip-path: polygon(50% 0%, 100% 6%, 100% 94%, 50% 100%, 0 94%, 0 6%);
}

Screen Shot 2023-12-24 at 12.32.42
Screen Shot 2023-12-24 at 12.32.421892×1048 115 KB

You could even add the red circle as a box-shadow to make things easier.

5

My intention was to ensure that the panels are always totally with the black background on all screen widths.

6

Yes of course :slight_smile:

You would need to pad my example out to stop that happening or change the angle to a fixed px rather than percentage so it can be exactly catered for.

In your example you could overlap the top and bottom elements by 1px and that would stop the line from appearing.

7

Or a 1px black outline on the middle element?

(But may need to use z-index to put triangles on top)

1 Like