< All Topics

Add a Banner to the Homepage

Adding a banner to your course homepage can help “anchor” the page. It also makes your course look welcoming and professional.


There is a deafult banner associated with every module on Moodle. Follow the steps below if you want to change this image. Please note that you should preview your course across all devices if you want to change the image.


Make sure to Turn editing on before getting started with this guide.

Adding a Banner Image

  1. Find or create any graphics you want to be in your banner. Check out pixabay.com for free, high-quality photos and clip-art you can use .
  2. On the main page of your Moodle course, select Edit settings at the top of the page.
  3. In the course format area, choose a course image. Note that you can only have one course image in place at any one time. If you want to replace an existing image, click on it first to delete it and then upload your own image.
Uplaod Course image


What do the different code parts mean?

Learn more about the code

alt=This is where you enter alt (alternative) text for your image so screen readers can “explain” the image.
background: rgba(255,255,255,0.8)RGBA color values are an extension of RGB color values with an alpha channel – which specifies the opacity for a color. In our example, the first three numbers (255,255,255) set the background color to white and the last number (0.8) makes it slightly transparent.
background: url(‘imageURL’) no-repeat right bottomPuts an image into the background of our banner. The “no-repeat” part indicates that we only want the image to appear once while the “right bottom” part says where we want the image to be positioned. Learn about other positioning options.
background: wheatSets the background of our banner to the color “wheat.” See a list of other color options.
border: 1px solid grayAdds a border. The first value (1px) is the border width, the second value (solid) is the border style, and the third value (gray) is the border color. See more border styles.
brA line break.
display: inline-blockTells the element to allow other elements on the same line.
display: tableTells the element to display like a table. In our example, this allows us to prevent the semi-transparent white background from being its full width.
divA div is like a container – it’s the container for our banner.
divA div is like a container – it’s the container for our banner.
h1Indicates a top-level heading (heading 1). This will make the text bigger and add some margin.
img src=The image tag indicates we are about to add an image and the src= part says where to find the image (the url in our case).
margin: 0 autoThe first value (0) sets the top and bottom margins while the second value (auto) sets the left and right margins. Setting left and right margins to “auto” is a common way for horizontally centering an element on a page.
paddingAdds padding (space) between elements. We usually use this to keep text from being too close to things like borders and images.
styleIndicates we are about to add CSS code, which we use to style html.
text-align: centerCenter aligns text. You can also use “left” (the default), “right,” or “justify.”
vertical-align: middleCenters the text vertically.
widthSets the width. We use % for width so elements can resize.
Table of Contents