Text in image

[HannaHa]

Hello, how do I overlay an image with text?

I want my Home page to look like the Renew stack demo. But unlike in the Renew demo, I want the text to be actual text, not part of the image.

[ruenel]

Hello @HannaHa,

Thanks for writing in! You can simply insert the image as a background image of the section and then use a text element inside a column. I would recommend that you check out these video tutorials from our Youtube Channel:

Hope this helps.

[HannaHa]

Thank you, very good videos! However, this is what it looks like for me. Why doesn’t the whole image show?

And how do I make the image “start” right beneath the nav bar, like in the demo of Renew?

I’m also wondering how wide you recommend I make the image (before uploading it)?

[prakash_s]

Hi @HannaHa,

It seems that you have set the background image for the section. You need to set padding-top and padding-bottom to achieve your design.

Now go to you Row and divide you row into 2 columns or as per your design.

After that go to row setting and set the content vertically centre align and then add your text, button and style it as per your design.

If it does not work, please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin level username and password
• Exact page URL

You can find the Secure Note button at the bottom of your posts

We can exactly tell you the image size to be uploaded, it depends upon your design. To make it full width you should use 1920*1080px.

Thanks

[HannaHa]

Thank you so much, really great answer! At first, I get the desired results when following your steps.

However, when I add my headline, the area shrinks again. Please see attached screenshots. Why does it do that?

[christian]

Hey @HannaHa,

That is because the elements take up space. Anything you add in the section that takes up space acts like a Padding. You need to balance the your padding setup and the elements inside to get your desired look.

Also, please ensure the Background Size is set to Cover and the Size of the image is equal or larger to your screen size so it covers the space exactly the size of your image.

If that doesn’t help, please provide the info asked by my colleague.

Thanks.

[HannaHa]

Ah, perfect, now I understand! Thank you so much!

[HannaHa]

Hello, I uploaded an image that’s 1920x1080. But I still get white space to the left and right of it. Why is that?

I’m also wondering if the correct way to make the image align with the top navbar is to set the top margin to -7? Or is there a better way?

Thank you for your help.

[ruenel]

Hello @HannaHa,

Did you insert an image element or use the image as a background image of the section? You must use the image as a background image as what my colleague has suggested. To better assist you with this issue. provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
​
To know how to create a secure note, please check this out: How The Forum Works


Best Regards.

[HannaHa]

Hello, yes, I used it as a background image. I will provide the login details though. Thank you very much for your help!

[tristup]

Hi HannaHa,

I went ahead and set the Site Width to 100% and select the No Container|Header, Footer as Page Template. Now the background image is fullwidth, you may need to adjust the inner content as per your need.
Please find the screenshot describing the settings.

Thanks

[HannaHa]

Oh, so that’s what it was! Thank you very much for your help

This created another issue, however. The logo and the menu now have no spacing to the side whatsoever. Where can I adjust this? I’ve tried in Theme Options>Header.

[marc_a]

Hi @HannaHa,

Sorry for the confusion, the reason why there’s no spacing because of the site width was set to 100%. By default the site width is set to 88%. See attached screenshot for the default settings for the Layout and also I went ahead and change back the site width to 88% and it doesn’t affect the background image you set on your homepage.

Hope that helps.

Thank you.

[HannaHa]

Now it’s perfect, thank you!

[tristup]

Hi HannaHa,

Glad that we are able to help you.

Thanks