Overlay png on top of row with background image


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:

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


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

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?



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

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


Thanks so much for the help and swift responses.

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;