[Support request] Add SVG image after page-hero.

[Brandi]

I am trying to add the divider for the hero image on the homepage of Vinyasa by Mike Oliver.

After looking into it I realized it is a SVG file which I have never worked with.

I tried following the directions at https://generatepress.com/forums/topic/how-can-i-add-a-header-image-with-a-diagonally-cut-off-bottom/ but I am trying to make something round.

I also tried the following but nothing is showing.

.page-hero {
position: relative;
overflow: hidden;
}

page-hero:after {
content: “”;
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: url(curved-bottom.svg);
}

Any suggestions or other threads I’m not seeing?

[Tom]

Hi there,

Any chance you can link me to your site so I can take a look?

This is how I would do it: https://generatepress.com/forums/topic/how-can-i-add-a-header-image-with-a-diagonally-cut-off-bottom/#post-1223101

[Brandi]

Site is on local server. I think the issue is I am not using the Header Element, I am using GenerateBlocks to build the header.

[David]

Hi there,

the same method should apply. Select the GB Container Block, in the Settings Sidebar > Advanced > Additional CSS give it a class of container-shape

Now in your CSS instead of using .page-hero and .page-hero:after use:

.container-shape and .container-shape:after

[Author]

Posts