Text-On-Image

  • 1
  • Question
  • Updated 9 years ago
  • Answered
OK,

So I'm not really a CSS nerd here, presuming that I would CSS to do the operation I would like. In shirt terms - what I want to achieve is text-over-image. For my lovely new site I would love to overlap some text onto an image to make a cleaner look. If anyone could direct me to some advice about this I would be very grateful.

Thanks,
Dill
Photo of Dill S

Dill S

  • 76 Posts
  • 5 Reply Likes
  • excited

Posted 9 years ago

  • 1
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
Hi Dill S,

You can add text to your pictures using Picnik: a powerful image manipulation tool that Yola has integrated. Here is something you can try:

1. Upload the picture you want to use and in the File Manager, click "Edit Picture".
2. The Picnik image editor will load with your picture inside it.
3. When it is finished loading, click the "Create" tab.
4. Below the "Create" tab, click the second button from the left - which will give you the option to add text to your picture.
5. When you have added your text click the yellow "save to Yola" button in the top right hand corner of the Picnik dialog box.

You will then have a picture with text on it that you can display on your site.

Is this what you are trying to achieve?
Photo of Dill S

Dill S

  • 76 Posts
  • 5 Reply Likes
Hey Karshnee -
I have thought about this way but I want my text to be text that the browser recognises, so that you could highlight it. A nice example on your page here: http://yep.yola.com/marketing.php In the *Store* module on the page. The text is within- or on the image, but the browser picks it up as default text.

Can you answer this?
Sorry to be picky.

Dill
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 237 Reply Likes
Hi Dill - I'm going to try and find someone who can answer your question (it's certainly beyond my expertise).
Photo of Dill S

Dill S

  • 76 Posts
  • 5 Reply Likes
I found a bsic way to do this operation, its very messy. You can add a background to a table, but I hate using tables, all different in different browsers, etc.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Dill

I'm fairly confident that the example you're referring to is using some kind of table which contains the background image along with 2 images - the "Expert Shop" and the Yola cap. Then, they used normal text with a link for the "Check out our store for your YEP gear".
Photo of Dill S

Dill S

  • 76 Posts
  • 5 Reply Likes
Aye - you are correct.
Photo of Mstgrr

Mstgrr

  • 31 Posts
  • 4 Reply Likes
Hi Dill,

The block in the YEP site is a little piece of HTML that you can easily add to your site. And yes, it's using a little gif as a background image to the table - don't stress, it shouldn't break.

Adapt this code and paste it into an HTML widget on your page. (Be sure to insert the URL for your images into the bits marked "INSERT IMAGE LOCATION").



Hope it does what you need!
t
Photo of Dill S

Dill S

  • 76 Posts
  • 5 Reply Likes
Thanks a ton you guys. My site now works very well! nice to have an alternative to the plain "fieldset" and "legend" tags.

thanks,
D
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I'm glad to hear that you were able to make use of this code!
Photo of Mstgrr

Mstgrr

  • 31 Posts
  • 4 Reply Likes
Sweet :)