Creating Section Headers with Images in Moodle


Instructors may add header images to sections and subsections in a course. If instructors would like to add images that are not at the top of a section or subsection, a Text and media area should be used instead.

This article provides instructions on formatting the HTML of an image so it displays as a heading at the top of a section in a Moodle course.

Adding Section Header Images

Images can be added by editing the section settings. Add the image using these instructions:

  1. In the top right corner of the Moodle window, enable Edit mode using the toggle.
  2. On the Moodle course page, locate the section or subsection to edit.
  3. Click the Edit icon (which looks like 3 dots).
  4. In the drop-down menu that appears, select the Edit settings option.
  5. In the Description box, use the Insert and edit image or Image button (depending on the text editor used) to insert the image file.

This will add the image to the Description field of the section. Then, edit the HTML of the image.

Editing the image using the TinyMCE text editor

After inserting the image, to change the width and height of the image to adjust to users' window size:

  1. In the Description field, click the View drop-down menu.
  2. In that menu, select the <> Source code option.
  3. In the Source code field, find the image HTML, which will start with <img.
  4. Find the width attribute and remove the number within the quotation marks.
  5. Enter 100% within the quotation marks.
  6. Find the height attribute and remove the number within the quotation marks.
  7. Enter auto within the quotation marks.
  8. Click the Save button.
  9. Click the Save changes button.

This will ensure that the image takes up the entire width of the section, and that the height automatically scales to the user's display.

Editing the image using the Atto text editor

After inserting the image, to change the width and height of the image to adjust to users' window size:

  1. In the toolbar of the text editor in the Description field, click the Show more buttons icon which looks like a down-pointing arrow, to expand the toolbar.
  2. In the expanded toolbar, click the HTML button (</>) to access code view.
  3. In the code view, find the image HTML, which will start with <img.
  4. Find the width attribute and remove the number within the quotation marks.
  5. Enter 100% within the quotation marks.
  6. Find the height attribute and remove the number within the quotation marks.
  7. Enter auto within the quotation marks.
  8. In the expanded toolbar, click the HTML button (</>) to close code view.
  9. Click the Save changes button.

This will ensure that the image takes up the entire width of the section, and that the height automatically scales to the user's display.

Library of Header Images

There is a library of banner images available for instructors to use as section headers in DELTA's "Moodle Banners - NC State Branded" Google Drive folder.

Additional Resources

Creating Headers with Colored Backgrounds and Text in Moodle (DELTA Knowledge Article)

Spruce Up Your Moodle (DELTA Teaching Resources)

For additional assistance, please contact the LearnTech Help Desk at learntech@ncsu.edu or (919) 513-7094, or via the Get Help form on the DELTA Knowledge Base.