Teaching with Moodle

 
 
Sunny
Adding text over an image in Moodle
 

Hi,

I'm using Moodle 1.9+ and am trying to find out how to add text (using HTML Editor) in the blank space of the image (attached).

I realized it would be easier to add text inside an image and then link the text. It allows for any changes in the future as well.

How do I go about doing this?

Thank you!


 
Average of ratings: -
Picture of AL Rachels
Re: Adding text over an image in Moodle
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

Hi,

I can make this work on my Moodle using the following directions, but when I do it here in this forum the picture disappears. I captured a picture of it in a forum on my Moodle and that is what you see down below here.

Your picture is 726 x 480 pixels. Make a two column by two row table and set its size to 726 x 480. Set your picture to be its background. Set the cell widths to be 50% of the table width. Type your text in the top right table cell using lines and spaces as necessary to make the text appear on the page in the picture. Change your text as needed.

Hope it works for you too,

AL

reply pic

 
Average of ratings: -
paula
Re: Adding text over an image in Moodle
Group Particularly helpful Moodlers

That is awesome! Learn something new about tables today.

Thanks,

Paula cool

 
Average of ratings: -
Sunny
Re: Adding text over an image in Moodle
 

Hi again,

Was just trying to get this right but being a noob in this, I realized I don't know HOW to set the image as a background when I'm creating the 2X2 table!! :-o

Do you have to HTML code this to make the image as background?

Thanks!

Q

 
Average of ratings: -
Apache OpenOffice Logo
Re: Adding text over an image in Moodle
 

Read CSS, that will help you a long way, here is a good tutorial to learn CSS, is very quick and have excercise to learn it. 

http://w3schools.com/css/default.asp

The code is this one

<table style="background-image: url('path/to/image.jpg')" ...>

Where path to image is the address of your image of course.

 
Average of ratings: -
Picture of AL Rachels
Re: Adding text over an image in Moodle
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

Click the insert/edit table button to make the table and before you insert it, click on the advanced tab. Background image is one of the options. If you need to go back and change settings again, right click in the table and select insert/edit table to go change the pictue/settings.

 

HTH

AL

 
Average of ratings: -
Picture of Tee Prescott
Re: Adding text over an image in Moodle
 

Hi I have followed the directions on setting an image behind text in a table but all I get is the file name - no image.  Moodle 2.2

sad Tee 

 
Average of ratings: -
Picture of AL Rachels
Re: Adding text over an image in Moodle
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

Sorry Tee,

I do not have a Moodle 2.2 so I don't know what could be causing it not to work for you.

Maybe someone else will have a suggestion.

AL

 
Average of ratings: -
Sunny
Re: Adding text over an image in Moodle
 

AL,

Hi again, was going thru your suggestion in using the HTML Editor in Moodle to set Background but it looks like (refer to images below), my "insert table" does not have an "advance" tab that I can click on! :-o

I'm using Moodle 1.9+

Thanks!



 
Average of ratings: -
Picture of AL Rachels
Re: Adding text over an image in Moodle
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

SS Kew,

Sorry, by the time I read you original post, on my phone, and went to my computer to answer, I forgot you said you were on Moodle 1.9. I haven't used my Moodle 1.9.19+ for a while but you still should be able to do the background image in a table. It is just a little more trouble to get it to work.

Create your table. Go back in to edit and swtich to the larger/full screen editor mode that gives you the extra row of editor toolbuttons. The first button in the new row is table properties, click in your table, then click the table properties toolbutton. In the bottom section under Style [CSS] there is a place were you can add an image URL  Theimage will get tiled to fill in the whole background of the table. 

Hope it works for you,

AL

 
Average of ratings: -
Sunny
Re: Adding text over an image in Moodle
 

AL,

Got it, with thanks! big grin

So if I want to remove the tiled images, I'd have to use the "no repeat" html for background?

Thank you for your help!

Khew

 
Average of ratings: -
Picture of AL Rachels
Re: Adding text over an image in Moodle
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

Right, use the "no repeat" and or set the table dimensions to be the same size as the picture.

AL

 
Average of ratings: -