background image text box

  • 1
  • Question
  • Updated 9 years ago
  • Answered
How do I get a background image in a text box?
So with the text ABOVE?
Photo of knoestws

knoestws

  • 3 Posts
  • 0 Reply Likes

Posted 9 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi knoestws

Try using this code:

<table style="background-image: url(http://YOUR SITE DOMAIN/resources/YOUR IMAGE FILENAME); border: 1px solid gray;"> <tr> <td>YOUR TEXT GOES HERE</td> </tr> </table>

You can change the border thickness and color.

Please let me know if you run into any problems or if this does not answer your question.
Photo of knoestws

knoestws

  • 3 Posts
  • 0 Reply Likes
Thanks, I am sorry for my translation-error.
I meant Text with the picture beyond (not above). Seeing the picture through the text.
Photo of judi

judi

  • 1 Post
  • 0 Reply Likes
this isnt working for me. where do i put the code. i am very new at this. :)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Judi

You need to use the HTML widget. You can add HTML by dragging and dropping an HTML widget from the sidebar on the right onto your page (the icon for this is a blue sphere).

An HTML editor will open up that will allow you to write or paste in your code. When you are done, click "ok" and you will see the way that the HTML displays on your page

To edit the HTML in a text widget, click the last icon on the text editing toolbar (HTML) You can then edit the HTML. When you are finished, click "OK" to return to editing text with the Yola text editor.

I would recommend that you use the code provided by Kershnee as that is a better laid out code than the one I provided. Please let us know if you have further questions.
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Judi,

The code above is an HTML code so to add it to your site, you need to add an HTML widget from the sidebar on the right onto your page (the icon for this is a blue sphere).

Once you drag and drop the widget onto your page an HTML editor will open up that will allow you to write or paste in your code. When you are done, click "ok" and you will see the way that the HTML displays on your page.

To edit the HTML in a text widget, click the last icon on the text editing toolbar (HTML) You can then edit the HTML. When you are finished, click "OK" to return to editing text with the Yola text editor.
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
You can also try this:

<div style="width:400px;height:211px;border:2px solid red; background-color:pink"><span class="Apple-style-span" style="font-size: large;">This is where your text goes</span></div>

You can drag a text widget onto your page, click on the little html icon on the Edit Toolbar 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-color is the color of the background
5. You can put the text you wish to appear where you see: "This is where your text goes"
6. Click OK

You can change the various pieces to make it the size and color that you prefer.

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 hightlight the text and use the Edit Toolbar to change its various attributes such as color and size.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
@Kershnee - what does "apple-style-span" mean in your code?

Thanks for sharing that div code as well. I used the div code on my other site but for some reason, it didn't function well with my overhauled site. So, that's why I ended up using a table code. I think div codes are generally easier to manipulate.
Photo of knoestws

knoestws

  • 3 Posts
  • 0 Reply Likes
Thanks, I am sorry for my translation-error.
I meant Text with the picture beyond (not above). Seeing the picture through the text. ( Delete or Edit for 15 minutes )