How to add image in background of text?

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I want to image in background of text, how can i do it?

See http://canditech.yolasite.com

here text is part of image, bots can't track them. perhaps it will not be SEO friendly
Photo of Manish

Manish

  • 16 Posts
  • 0 Reply Likes
  • godfather

Posted 7 years ago

  • 1
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hello Manish,
I can definitely understand what you are saying about search engine bots not being able to read text in an image. You can definitely add a photo as your background to a Text Widget! Here is some code that you can use:

<!--
<div style="border: 2px solid red; width: 400px; height: 80px; background-image:url(http://mysitename.yolasite.com/resour... is where your text goes</div>
-->

You can drag a Text Widget onto your page. Click inside the Text Widget to bring up the Text Editing Toolbar. On the toolbar, click on the "HTML" button and paste in that code.

Here is what the various pieces of the code do, each of which you can change to suite what you are trying to accomplish:

1. Width is how wide the area will be.
2. Height is how tall it will be.
3. Border is how thick it will be should you choose to have one, and after that you put the color of the border. In this case - solid red.
4. Background-image is the path name of your file. The path to your files would be: http://mysitename.yolasite.com/resour...

Where:

1. http://mysitename.yolasite.com" is the URL of your site.
2. "resources" is the name of the File Manager (you must not change that).
3. "folder" - if your file is in a folder, include the folder name.
4. "file.jpg" is the name of your file.
5. Please ensure that the path name is identical to the one in the File Manager in terms of upper and lower-case letters, dots, dashes etc.
6. You can put the text you wish to appear where you see: "This is where your text goes".
7. Click "OK".

Note: Because this is in a Text Widget, you can also type directly into the Text Widget instead of putting the text you wish to appear in the HTML code. You can also highlight the text and use the Text Editing Toolbar to change its various attributes such as color and size.

Hope that helps :)

Kind Regards,
Emmy
Photo of Manish

Manish

  • 16 Posts
  • 0 Reply Likes
yeah, thank a lot