Overlaying Text on Image

overlay
image
#1

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:

4 Likes
How-to Guides
Text overlay on image
#2

thank you for that small but useful tutorial! I‘m sure I‘ll use that next time! But i think everybody then needs to add

  • Transparent 75% black background
  • Maybe even some small drop shadow on Font

would it work with multiline? Or how to solve that then. Cool for thumnails with short infos!

#3

Well you can add background to your title using the design panel. The tutorial is just showing the basics that most of the non-experienced users need to know about positioning elements.
Actually it produces 3 lines of CSS so you can easily do it in styles panel, if you have basic CSS knowledge :slight_smile:

You can then extend this using the design/styles panel as you need.

1 Like
automatically bumped #4
automatically bumped #5
automatically bumped #6
automatically bumped #7