Create a text on top of the image

[Freund]

Hi,

I tried to look for answers in the posts but I couldn’t find the answer about this.
I wanted to use an image where I could also place an editable text on top of it.
I want the image to be clickable and link to one of my pages which is pretty easy to do, but the problem is, there is no option where I could place a text to appear in front of the image.

The main reason that I want this text to appear on the photo so that I could create effects using letterpress. Here’s the link: https://designyourownblog.com/letterpress-text-using-css/

I hope you can help me with this. The options on the classic image and the image element don’t have this option to somehow create a text on top of the image. If you can provide something how to do this, then I would really appreciate it.

Looking forward to hearing from you soon.

[paul.r]

Hi,

There is no element that could do both.

You can use simple html to achieve this.

Add the code below in a Classic text element.

<a href="http://yoursite.com/page">
      <div style="background:url('image.jpg') top center no-repeat;">
                  ADD YOUR TEXT HERE
      </div>
</a>

Change the urls accordingly.

Hope that helps

[Freund]

Hello,

I somehow manage to make a background image using only the the style options below and not the html file. This is the code I used:

background-image: url(‘image url here’); background-size: 100% 100%;

The only problem that I have right now is, how to make the image larger and make it square.
I know that there is something wrong with the code I placed. You can see the image below that it is rectangular and is very tiny background image. I just hope you can provide me the right one. Thanks!

[jade]

Hi there,

Please try to add a top and bottom margin of the element where you added the backround.

In case this doesn’t help, would you mind providing the link to the page that you’re working on so that we could check it?

[Freund]

Hello,

I can’t find the option to add a margin in the classic text element. When I tried to use the text element, there is an option to add a margin, but there is no “style” option at the bottom for me to add the short codes :
background-image: url(‘image url here’); background-size: 100% 100%;

And another thing, may I know if what is the best element to use in creating a registration form without using plugins? If I have to use plugins, what should you recommend?

You’re so much helpful. And I really appreciate it but still am having troubles resolving this.

[christopher]

Hi there,

I suggest that you follow the instructions below to have a text over the image:

1. Add an image element.
2. Add your Desired text to the ALT option of the image element:
   
3. Add a CSS class to the image element by clicking on the customize tab: (textoverimage)
   
   
4. Add the JavaScript code below to X > Launch > Options > JS:

jQuery('.textoverimage').each(function() {
	jQuery(this).append('<span class="img-desc">' + jQuery(this).find('img').attr('alt') + '</span>');
});

5. Add the CSS code below to X > Launch > Options > CSS:

.textoverimage {
    position: relative;
}

.textoverimage .img-desc {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 20px;
    color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

You can add your custom CSS code to the .textoverimage .img-desc selector which is the selector of the text over the image.

Please kindly consider that this is a customisation request and our theme does not support this feature out of the box, we did our best to give you proper method to get started with customisation to achieve the future. Unfortunately, we will not be able to implement and maintain the suggested code and you will need to do the customization yourself.

For the additional questions please kindly open up a separate thread and we will be more than happy to get back to you.

Thank you for your understanding.

[Freund]

Hello,

You’re amazing! Thank you! It is now working.!

[rad]

You’re most welcome!