Is it possible to insert a background image into a wiglet box?

  • 1
  • Question
  • Updated 9 years ago
  • Answered
Photo of Susan


  • 3 Posts
  • 0 Reply Likes

Posted 9 years ago

  • 1
Photo of Sanja


  • 10698 Posts
  • 495 Reply Likes
Hi Susan,

I have sent you a reply to the email you have sent :)

Here's the code you would need to accomplish this:

<div style="border: 2px solid red; width: 400px; height: 80px; background-image:url(;background-position:top;">This 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:

Where:" is the URL of your site.
~ "resources" is the name of the File Manager (you must not change that).
~ "folder" - if your file is in a folder, include the folder name.
~ "file.jpg" is the name of your file.

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.

You can put the text you wish to appear where you see: "This is where your text goes".

6. 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.

Please let me know if you have any trouble with this.