UCL Logo

UCL Moodle Guides


Moodle Resource Centre - home

General links

Moodle Home
E-Learning services for staff
Quickscan Dyslexia Screening Tool

Moodle Resources

Page tree

Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.


  1. Compress your images first so they don't slow down the page load.

  2. Turn editing on and edit the type of page element (Topic summary, label, page etc) where you will get a text editor.

  3. Decide where you want to place your image (roughly) and place the cursor there.

    1. If you want the image to be centred, then click the Align center button to move the cursor to the centre of the line and thus ensure that the image is centred.

  4. Click on the Insert/edit image icon in the toolbar; the Insert/edit Image window appears.

  5. Click on Find or upload an image...
  6. The File picker appears.
  7. Use this to select a file, the image should now be displayed.
  8. Add an Image description (this is to make it accessible to visually impaired users, so making make the description meaningful)
  9. Click Insert to add your image
  10. To resize your image highlight it and eight little boxes (handles) appear around the edge. Use the corner handles to resize the image, not the side ones which will only distort your image.
  11. There are some other options on the Insert/edit Image window so select your image and click on the picture icon again.
  12. The Appearance tab lets you change the:
    1. Alignment, which if set to Left, puts the image against the left margin and has text 'wrap' to its right. Or, if set to Right thrusts the image against the right margin with the text wrapped to its left.
    2. Dimensions of your image. The width and height in pixels are shown in two adjoining fields. Just change the value in one field and the other will change accordingly when you click elsewhere in the Insert/edit image pop-up.
      1. highlight it and eight little boxes (handles) appear around the edge. Use the corner handles to resize the image, not the side ones which will only distort your image.
    3. The Vertical space and Horizontal space settings allow you to add some white space around the image - Vertical and Horizontal, described in pixels – try 5 or 10
  13. The Advanced tab allows images that change when you 'mouse over', something to try later!
  14. Click on Update to save changes.



For this, you need to go into your Moodle profile and enable the TinyMCE editor (it's a great text editor - many extra functions for tables, for example - but not currently our default in Moodle)


if you feel comfortable modifying the HTML code directly, switch into HTML view using the <> button and add the style code in bold below to the style tag of the banner image, removing any other styles already in this tag.


Next, choose the place to insert the image. The This could be the top of a Section (although its best not to use this area and use Labels instead, because they can be moved, duplicated and imported as required),  a Label, or on a LabelPage, often work well.

  1. Insert your wide, shallow image according to steps 1-9 on the instructions above - or if you already have an image in place then:
  2. Then to add the extra setting, put the section or label containing the image into edit mode, then to edit the actual image, select that image and in the editor's toolbar click on the Image button; its settings display.
  3. Click on the Appearance tab.
  4. Into the Style field, type: max-width:100%; height:auto; - then save the settings. 
    • N.b. the semi colons are important. This short string of code you've just entered will resize the image when the window is resized while keeping its aspect ratio (rather than squeezing it).