[Support request] Text Over Image

[Paddy Cannon]

I need to add a bit of text over a media placed image with a section. It will be a link to a Podcast, is there a way to do this as adding the image as a background image then adding content (about 3 words) makes my image cut down vertically? Am I doing something wrong here?

[David]

Hi there,

can you remove the coming soon so i can take a look at the issue.

[Paddy Cannon]

Thats now live…
So, the top section on ‘podcasts’ is a background image, but adding text is cutting it down.
The lower section is placed image, but how can I add text to that too, but on top?

[Paddy Cannon]

Any luck at all?

[David]

Just to confirm – the image needs to be clickable as well as the text ?

[Paddy Cannon]

Yes that’s correct

[David]

Takes some HTML and CSS.
So once you added your image, switch to the text editor. And wrap your Image with this HTML and include the span tag for your label:

<a href="url-link-goes-here" class="img-button">
    <!-- Your <img  /> goes here -->
    <span class="img-button-label">Image Button label</span>
</a>

Then add this CSS:

.img-button {
    display: block;
    position: relative;
}
.img-button-label {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 40px;
    display: flex;
    align-items: center;
    /* Font styling here */
    font-size: 24px;
    font-weight: 500;
    color: #f00;
}

[Paddy Cannon]

Fab, will give that a go!

[David]

Let us know 🙂

[Paddy Cannon]

Still displays text underneath the image not actually on top?

[Paddy Cannon]

Actually, seemed to have worked it out! It does work, not being much of a coder doesn’t help, but its working!

[David]

Awesome – glad to see you got it working

[Michele]

Hello how did you get it to work? the title is still beneath the image. Seems the css did not take, i added it to the additional css widget.

[Michele]

Never mind i got it to work too thank you so much!

[David]

Glad to hear that!

[Author]

Posts