Text data over an image on Layout Grid

[BigTexLes]

Hello

I am converting my website from Webplus x8 to WB17. I am using the layout grids because I love the responsive design.

My website has a large image which is now attached to a layout grid. When the page is in iPad, the image resizes Ok.

However, in my original website, Webplus x8 allows me to add Text on top of the image.

See example of my original website showing a large image with Text on top: http://www.uxsoftware.com/pages/products.html

Currently with WB17, I had to modify the image and add text using Paint. That is Ok, but users who are from a different country uses Google translate and that image text cannot be translated. It can with Text on top of the image.

So, is it possible to have Text data on top of the image while enclosed in layout grids.

Thanks

[Pablo]

Instead of using an image object, you can also use the image as background.
Then you can put an text object on top of the image.

Or else you can use 'watermark' text or a rollover text image.

There are many templates which demonstrate this functionality.
https://wysiwygwebbuilder.com/templates2022.html

[BigTexLes]

I will try that.

Thanks

Les

[BigTexLes]

Hello

The background image and rollover image did not work as expected.

I could not find where the "watermark" text is located.

Can you help show me where in the program.

Thanks

Les

[alan_sh]

I just tried a watermark on an image. It does work. You add the image and then go into properties. The 5th tab says "Watermark". Select that and you have options there. I would suggest you make the type as "HTLM Overlay" as that seems to make it stand out more (at least it did on my test).

Here's my wbs file if you want to see what I did https://www.dropbox.com/s/gct9tmfixpsuq ... r.zip?dl=1

Alan

[Pablo]

The background image and rollover image did not work as expected.

Did you look at all the templates?
There are many examples that use images with text on top of it.

[BigTexLes]

@alan_sh

I looked at your test program and saw the watermark. Yes it will work, but my text over the images are several lines and watermark is one.

Pablo, I will continue reviewing all the templates to see if I can come up with a solution.

Thanks

Les

[BigTexLes]

SUCCESS!!!

After many tries, I finally was able to get the Text over the Image on a Layout Grid. Using the background image and setting it to Horizontal=center, and veritical=center.

For the Text, I have several text lines with different Font sizes. I just had to make sure the top text and bottom text had enough margins set to equal to the height of the Image. And to make the Text only fill 1/2 of the Image, I set the "Fixed Width" of the layout Grid to 1/2 of the image width. This caused the text to wrap as expected.

Very happy customer! Now I can continue converting the website over to WB17.

Thanks for your suggestions.

Les

[alan_sh]

Are you using the background image on the layout grid or the text?

I just realised you may be able to put a bacground image in a text box - and yes you can.

Alan

[BigTexLes]

Hello

The background image on the layout grid. You have to set these properties

Under the style tab:
Repeat: "do not repeat"
Horizontal: center
Vertical: center
image only

Under the General tab:
Fixed width (px): 600 px. 1/2 of the image width. So the text will auto wrap. I did not want the text to cover all of the image

Then for the text. Depends on how many text lines.

Example:

Text 1: LARGE TEXT HERE
Text 2: Middle size text
Text 3: Small size text with wrap around

For Text 1 and Text 3, you set the margins Top and Bottom to make sure the Total height of all three text lines equals the height of the image. In this case, the image height is 320 px. Otherwise, you would only get a partial background image.

Les

[lpug]

I know this is an older thread, is there any way to have the background image in a loyout grid responsive, or can we change the image between breakpoints.....it appears this is not possible?

[Pablo]

You cannot have a different background image in breakpoints.

[gofrank]

But I believe you can hide one grid and show a different grid (with a different background image) in the smaller breakpoints.