Streaming live at 10am (PST)

Background-image with bottom angle: box-sizing option needed for correct border-bottom angle-effect


Hello webflow-team and @Lindapham

first of all: we want without code an angle on our section: this can be done this way: ‘border-trick’, : works perfect when there is no use of a background-image.

But when you need background-image: section can be 100vh but the border shifts the background-image away: I found an other solution: to create a div absolute above a full section, but this is a big way around, maybe webflow-team can make it easier and the correct way by using no extra code.

I figured out that when you want to set a background on ‘cover’ with a border of 100vw, the backgroundimage is not streched out!? Try it with this template

with an example of a website:

the only solution is this: but this should be the ‘Auto’ width and height for ‘cover’

Is this bug normal? I would like to make the effect like : look to my layoutpost: How to make css svg whitout triangle.svg

but the problem is the backgroundimage does not fit into your ‘border-trick’
so this is my result for ‘prison escape’-test : the background-image on ‘cover’ isn’t cover at all… because with your method ‘border-trick’ the image comes back… strange: bug into webflow?

if tile is set to none the background-image should also be streched out = BUT BECAUSE THE BACKGROUND-IMAGE IS TO SMALL YOU ONLY SEE THE SQUARE at the right-top, but if I take a big image than I see the correct behavior: I would ask to the webflowteam for a bigger ‘background-image preview’ to understand what ‘custom auto/auto’ means exact.

so if I have a big background-image I only see the ‘true pixel-width and pixel-height’ of the image:

To try also my results:
this is my result into my preview:
If I look to Custom and Cover… it than the behavior is not clear what ‘Auto’ means… because cover is full width and height of the div = section = block with height 100vh

Thanks to look into the code for ‘cover’
Because I found a workaround-solution: to use ‘custom’ 100VW and 100VH BUT THIS IS ALSO COVER because the section is 100VW and 100VH!


How to make css svg whitout triangle.svg

Hi @KarelRosseel82

This is expected behavior with this sort of design. When you set a large border like this it will end up taking up the entire section/div — this is why the border trick words for angled sections.

Here’s a good way to visualize this. In this GIF I have a 600x400px div and I slowly add a border to the left side. You can see when I get to large VH values — 80-100 — the background image is pushed outside of the div:

For now, your workaround is the best way to design an angled section with a background image. Alternatively, you can create a triangle shaped SVG and import it as an image, then add it as a background image to a section to get the desired angle.

Hope this helps!

1 Like

Hi @Brando and @Lindapham
yes you are right… I tried it out in w3schools, and a saw an option ‘box-sizing’ that can make a solution to the rest of or lives: please vote:

Let explain me what I found:

An example:
try it out:
backgroundimage to cover: no border around: you can see the full image

backgroundimage to cover: with border 50px around: you see not the full image because the border is above the backgroundimage! = THIS IS THE BUG OF WEBFLOW!

The problem with the border effect that shifts the picture also still occurs in w3schools:
So I tried a solution: border-box:

But I tried also border-box: to get the border inside the div => NOT YET POSSIBLE with Webflow!? why not?

test out:

Thanks to try it out
note: picture of the issue: ‘how to move a border’ : is this correct?