[Support request] Text Over Image

Home Forums Support Text Over Image

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1089044
    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?

    #1089509
    David
    Staff
    Customer Support

    Hi there,

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

    #1091135
    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?

    #1091266
    Paddy Cannon

    Any luck at all?

    #1091324
    David
    Staff
    Customer Support

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

    #1091483
    Paddy Cannon

    Yes that’s correct

    #1091520
    David
    Staff
    Customer Support

    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;
    }
    #1091544
    Paddy Cannon

    Fab, will give that a go!

    #1091562
    David
    Staff
    Customer Support
    #1092783
    Paddy Cannon

    Still displays text underneath the image not actually on top?

    #1092831
    Paddy Cannon

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

    #1093432
    David
    Staff
    Customer Support

    Awesome – glad to see you got it working

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.