Archived topic
Text Over Image
14 replies · Started by Paddy Cannon on December 2, 2019
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?
Hi there,
can you remove the coming soon so i can take a look at the issue.
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?
Any luck at all?
Just to confirm - the image needs to be clickable as well as the text ?
Yes that’s correct
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;
}Fab, will give that a go!
Let us know :)
Still displays text underneath the image not actually on top?
Actually, seemed to have worked it out! It does work, not being much of a coder doesn't help, but its working!
Awesome - glad to see you got it working
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.
Never mind i got it to work too thank you so much!
Glad to hear that!
