How to position text on top of a background image

[justingirves]

Hello,

I’m having problems moving the text element around the page without changing the dimensions of the background image. If I want to move the text to the top of the section, how would I do that, please. Thanks!

Here’s a link to the image https://www.dropbox.com/s/2n1qlwcdp4vigwu/Screen%20Shot%202022-04-13%20at%209.22.01%20PM.png?dl=0

[ruenel]

Hello Justin,

Thanks for writing in! If you do not want the image to resize (zoom in/zoom out), it is best that you do no use it as a background image. You need to insert it using the Image element. You can then add a DIV element and insert the Text element inside. This should how your element structure would look like:

The DIV element needs the following settings:

1.) Set the z-index:

2.) Set a 100% width and height:

3.) The position needs to be “Absolute” with the 0 value for the Top and Left position.

4.) And enable the Flexbox so that you can position the text to the middle of the column.

Hope this makes sense.

[justingirves]

Thank you, Ruenel. That was very helpful. Could you recommend any tutorials that would be helpful for learning more about working with elements, like divs, in Themeco so that I can have a better understanding about how to work with them? Thank you.

[marc_a]

Hey Justin,

You can find more video tutorial in our YouTube channel, please check this out!

• https://www.youtube.com/channel/UCgY5E3tOI83kBEahh9Y3uRg

Hope that helps.

[justingirves]

Thanks for your response and for the link, Marc. Are there any videos you’d recommend that go into depth on layout and working with elements? I’ve seen the Themeco YouTube channel and frankly, I find it difficult to navigate. It seems that the videos here are dealing with very specific issues and updates. If there are any specific recommendations you have based on the needs I stated, I’d very much appreciate it. Thanks!

[ruenel]

Hello Justin,

Regretfully we do not have more video recommendations for you. This is what I can advise you. Do not focus on just working with the elements present in the builder. Think outside of the box by looking at each element that you want to put in your design as layers (and/or grouped layers) and then work around it. You can then utilize the elements of the builder to create that layer/s. Just like what I have demonstrated in my previous post. My go to container is the DIV element because I can insert anything to it, and I can overlay or adjust the z-index of the DIV element so that it can be an overlay or can be positioned anywhere in a bigger container like the Column element. You can find out the rest of the elements of the builder here:

• Elements Overview | Themeco Docs

Best Regards.

[justingirves]

Thanks for your detailed response, Ruenel and apologies for the late reply!

Justin

[tristup]

Hi Justin,

Glad that we are able to help you.

Thanks