Text on top of a Image

Hi guys, Iam designing a Home page for a Institute, I want to write some text on this image. can anyone assist me how to do that?
3 answers

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%);

.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.