🤔 How to?: Combine an image with a text component (w/ video)

Hello!

The user needs to be able to type into a text component that is inside of an image.

How do I accomplish this?

Thank you!

Jamie

Hi Jamie!
Depending what you are planning to do with that image later on… but if it is only for display purposes, this video from Loqode school may give you an idea how to put anything (text or another object) on top of an image.

VIDEO

Hope this helps!

1 Like

Have you tried using a container with a background image design combined with entry and/or text components?

Or you draw with CSS:

1 Like

Hi Nataliya!

The image itself will just be a part of the screen. If the user can type directly into the image (using text components) then the image will fill the screen.

I’ll watch your video suggestion as soon as possible.

Thanks for the reply!


This is it!

Question: How did you get components to line up and be spaced evenly on each side?

Since I don’t know CSS, your reply got me a huge step closer!

Thanks a lot!!

The two images I loaded above are desktop views using containers.
Using an overlay with a background image may encounter issues in responding to various user screen sizes. I recommend the second method, which is drawing with CSS. However, this will require simplification and cannot fully replicate your graphics.
See how it work.

Here is the result you can achieve. Background images are purely decorative and are not stable for combining.

Thank you for sharing and I appreciate the effort. Well done!

Just so I am clear, these are overlays, so the user can’t type in where it says limit box, correct?

This is exactly the look I’m going for, I just need them to be able to fill in those boxes.

Thanks!

You can use any component. Didn’t you see my link above?
The image I included is an entry component + CSS styling.

OK. I was confirming what I was seeing. I am new to Glide and not familiar with CSS.

If you video recorded the steps (including where you put the CSS code) I’d be happy to pay you to send that so I can replicate what you did.