Overlay png on top of row with background image

Beaver Builder
1

Hi

New to the forum so apologies if this isn’t the correct category for this sort if question.

Am trying to figure out the best way of adding a png over a row with a background image and aligning this to the bottom of the image. !

So turning what you see here - https://www.cairngormscapercaillie.scot/test-2/ - into this:
ccp_landing_page_v2a|583x500

Assume I want to add a class to the row containing the background image and then some custom CSS? But struggling with what that should be.

Or is there a better way of doing this?

Many thanks in advance

Paul

2

Hi @paulmarshall1977,

Indeed, you can use CSS to attach a pseudo element to the row (::after) and display the bottom image in its background, pretty simple:

1 - Set a custom class on the row to target it with CSS, e.g.: my-custom-row
2 - Insert this CSS code in your site and customize the pseudo element’s height and background image URL:

.my-custom-row {
    position: relative;
}
.my-custom-row::after {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 50px;
    background: url('https://your-image-url-here') no-repeat top center/100% auto;
}
1 Like
3

Hi @avanti

Thanks for the swift response.

All works except the box containing the h1 sits behind the png - https://www.cairngormscapercaillie.scot/test-2/

I assume the pseudo class means the png is displayed after everything in the parent, which includes the box and h1.

Any tips on how to fix this? Or is a different approach required altogether?

Thanks

Paul

4

Ah yes, the stack order of the row content has to be set, add this:

.my-custom-row .fl-row-content {
    z-index: 1;
}
5

Perfect!

Thanks so much for the help and swift responses.

6

I see that, nice! :wink:
You should also shift the pseudo element bottom position of 1 px cause there’s a thin line at the bottom of the row on some screen width: bottom: -1px;