Wrap both elements in a container and apply the position-relative class
Then, for example if you want to position it to the bottom center of the image:
Apply the position-absolute-bottom class to your text element
Then add the following styling to your scss files:
.position-absolute-bottom {
position: absolute;
bottom: 0;
left: calc(50%);
transform:translateX(-50%);
}
.position-relative {
position: relative;
}
Hi Akash,
To achieve this you would have to use CSS and create some custom styling.
I would try to make a container with the text you want to show and set the styling to overflow: visible;
Then style the text by giving it a padding it shows on the exact place you want.
Hope this helps!
Instead of directly adding image on the page like this, I would recommend to add it using css property
background-image: url("<path to image in project folder>");
Now that your background is set, you can add text using text widget on to the page directly.