Overlaying Text on Image

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:

Open Content and add Image:

Browse to your image source and enable the Responsive checkbox:

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

Open Content and add Title:

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

And under position - set the title position to Absolute:

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:

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

We set it to white, using the color picker:

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

Community Page
Last updated: