Place text over image with fixed height

Question

I'm new to WordPress and am using the Astra theme with the standard Gutenberg builder. It would be great to be able to have a text that can be placed over an image like on this website:

The green square image should be placed behind the text:

With the standard Cover block it scales the height of the image too large, see second picture. When using Media and text block, the text can't be placed over the image.

I tried using the Spectra plugin of Astra to get this done, but can't seem to find a way. Another idea was to set a fixed height for a Column and place the Cover in there. But the object Column only has Minimal height and not Fixed height.

Any help would be greatly appreciated.

Answer 1

By adding an additional CSS class to the paragraph within the Cover block, you can use clip-path in CSS to draw the required shape to fit the text content; without the need for a background image, eg:

style.css / style-editor.css

.green-background {
    position:relative;
    width: fit-content; /* to only cover the text */
    float: left; /* default is centered in the Cover block */
    z-index:0;
}
.green-background::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    clip-path: polygon(10% 0%, 100% 0, 90% 100%, 0% 100%); /* background rectangle shape */
    background-color:rgb(115,213, 54); /* green color */
    z-index:-1;
}

Example Cover block with background image, color overlay with Additional CSS green-background applied only to Paragraph:

NB. The caveat to this method is that the Paragraph block can still override/apply its own text and background color: if a paragraph background color is picked it will appear over the top of the green background shape. If this is a concern, there are other steps you can take like extending the Cover block to remove the option.