How do i get the text on the background image

Answered

Broken Nokia posted this in #help-forum

2024-03-11T05:35:11.000Z

I have the boxed background as a png, how do i overlay the main text on the background image

Answered by Anay-208

.parent {
position: relative;
}

.child1 {
position: absolute;
}

.child2 {
position: absolute;
}

they both will overlay now. play with properties like z-index, inset, top, left

View full answer

4 Replies

Gharial

2024-03-11T14:07:46.000Z

Either use position: absolute for the text container, or use background-image:png-path to set the background image

@Broken Nokia I have the boxed background as a png, how do i overlay the main text on the background image

Anay-208

2024-03-11T14:11:54.000Z

.parent {
position: relative;
}

.child1 {
position: absolute;
}

.child2 {
position: absolute;
}

they both will overlay now. play with properties like z-index, inset, top, left

Answer

Broken NokiaOP

2024-03-12T04:30:42.000Z

thank you, position absolute with right-0 left-0 mx-auto worked for me

Masai Lion

2024-03-15T14:40:34.000Z

Hi, I need some help. Can I generate a build for my Next.js application directly using the next build command instead of npm run build/npx run build(according tio this article-Hi, I need some help. Can I generate a build for my Next.js application directly using the next build command instead of npm run build? If so, could you please provide instructions on how to achieve this.)? If so, could you please provide instructions on how to achieve this. Thank you