Discuss

Overlaying Text on Image

On this page

You can overlay any text over your images, using the Design Panel in Wappler.

We added a Bootstrap 4 Container on our page and it contains a Row with a Column. We'd like to insert our image inside this Column. Click the Add Inside button:

Screenshot_24|690x385

Open Content and add Image:

Screenshot_25|690x385

Browse to your image source and enable the Responsive checkbox:

Screenshot_26|690x385

Then, with the image still selected, click Add After button:

Screenshot_27|690x385

Open Content and add Title:

Screenshot_28|690x385

As you can see the title is below the image and not really overlaying it. So, open the Design panel:

Screenshot_29|690x385

And under position - set the title position to Absolute:

Screenshot_30|690x385

We want to position the title in the bottom left part of the image. So we enter Bottom: 15px and Left: 30px - you can also drag the bottom/left settings to adjust it more precisely. Note - if you want to position it on top, then you should adjust the Top property and if you want the title on the right, then you should adjust the Right property:

Screenshot_31|690x385

Then you can scroll down the design panel and setup the color of your title:

Screenshot_32|690x385

We set it to white, using the color picker:

Screenshot_33|690x385

Style the title/text as you need it for your project. And you are done, the title is overlaying the image now:

Screenshot_34|690x385