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

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  top: -3rem;
  padding: 8rem 5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../public/capabilities/back.png);

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;

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

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

Unlike this one.

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

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.

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


clip-path: polygon(50% 0%, 100% 6%, 100% 94%, 50% 100%, 0 94%, 0 6%);

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

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

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.

Or a 1px black outline on the middle element?

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

1 Like