# 🤔 How to?: Combine an image with a text component (w/ video)
**URL:** https://community.glideapps.com/t/how-to-combine-an-image-with-a-text-component-w-video/72961
**Category:** Ask for Help
**Created:** [April 30, 2024, 9:51pm UTC](https://community.glideapps.com/t/how-to-combine-an-image-with-a-text-component-w-video/72961 "2024-04-30T21:51:42Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@JamieErvin](https://community.glideapps.com/u/JamieErvin)
#### Post date: [April 30, 2024, 9:51pm UTC](https://community.glideapps.com/t/how-to-combine-an-image-with-a-text-component-w-video/72961/1 "2024-04-30T21:51:42Z")
Hello!
The user needs to be able to type into a text component that is inside of an image.
How do I accomplish this?
> **[Jamie's App\_v4.3.24 · Glide - Google Chrome - 2024-04-30\_17-39-38](https://app.screencast.com/nUKaQInOkMSNH)**
>
> World's leading screen capture + recorder from Snagit + Screencast by Techsmith. Capture, edit and share professional-quality content seamlessly.
Thank you!
Jamie
---
### Author:  [@Nataliya\_Kovaleva](https://community.glideapps.com/u/Nataliya_Kovaleva)
#### Post date: [May 1, 2024, 12:44am UTC](https://community.glideapps.com/t/how-to-combine-an-image-with-a-text-component-w-video/72961/2 "2024-05-01T00:44:08Z")
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](https://www.loom.com/share/3c9dc97c147f499491811b1429c30c2a?sid=3a566eaf-fc90-45c3-acfa-5b9a3314061b)
Hope this helps!
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 1, 2024, 3:48am UTC](https://community.glideapps.com/t/how-to-combine-an-image-with-a-text-component-w-video/72961/3 "2024-05-01T03:48:20Z")
Have you tried using a container with a background image design combined with entry and/or text components?
Or you draw with CSS:
---
### Author:  [@JamieErvin](https://community.glideapps.com/u/JamieErvin)
#### Post date: [May 2, 2024, 9:25pm UTC](https://community.glideapps.com/t/how-to-combine-an-image-with-a-text-component-w-video/72961/4 "2024-05-02T21:25:51Z")
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!
---
### Author:  [@JamieErvin](https://community.glideapps.com/u/JamieErvin)
#### Post date: [May 2, 2024, 11:00pm UTC](https://community.glideapps.com/t/how-to-combine-an-image-with-a-text-component-w-video/72961/5 "2024-05-02T23:00:22Z")
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!!
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 3, 2024, 12:32am UTC](https://community.glideapps.com/t/how-to-combine-an-image-with-a-text-component-w-video/72961/6 "2024-05-03T00:32:28Z")
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.
> [@How to Maintain Container Layout on Mobile Devices](https://community.glideapps.com/t/how-to-maintain-container-layout-on-mobile-devices/73021):
>
> Seeing a desire to maintain a container layout that is not responsive to mobile devices, you can still achieve this through the “grid-template-columns” code. Here’s the code you need to add to your application’s custom CSS: .grid-container .oneToOne { grid-template-columns: repeat(2, minmax(0px, 1fr)); } .grid-container .oneToOne \> div \> div { justify-content: initial; } Note: class name is grid-container
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 5, 2024, 1:18am UTC](https://community.glideapps.com/t/how-to-combine-an-image-with-a-text-component-w-video/72961/7 "2024-05-05T01:18:10Z")
Here is the result you can achieve. Background images are purely decorative and are not stable for combining.
---
### Author:  [@JamieErvin](https://community.glideapps.com/u/JamieErvin)
#### Post date: [May 5, 2024, 7:22pm UTC](https://community.glideapps.com/t/how-to-combine-an-image-with-a-text-component-w-video/72961/8 "2024-05-05T19:22:09Z")
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!
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 5, 2024, 8:00pm UTC](https://community.glideapps.com/t/how-to-combine-an-image-with-a-text-component-w-video/72961/9 "2024-05-05T20:00:43Z")
You can use any component. Didn’t you see my link above?
The image I included is an entry component + CSS styling.
---
### Author:  [@JamieErvin](https://community.glideapps.com/u/JamieErvin)
#### Post date: [May 5, 2024, 8:05pm UTC](https://community.glideapps.com/t/how-to-combine-an-image-with-a-text-component-w-video/72961/10 "2024-05-05T20:05:35Z")
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.