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.

Tips

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.

Reminder

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.

FAQs

What do the different code parts mean?

Learn more about the code

Code	Meaning
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 bottom	Puts 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: wheat	Sets the background of our banner to the color “wheat.” See a list of other color options.
border: 1px solid gray	Adds 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.
br	A line break.
display: inline-block	Tells the element to allow other elements on the same line.
display: table	Tells 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.
div	A div is like a container – it’s the container for our banner.
div	A div is like a container – it’s the container for our banner.
h1	Indicates 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 auto	The 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.
padding	Adds padding (space) between elements. We usually use this to keep text from being too close to things like borders and images.
style	Indicates we are about to add CSS code, which we use to style html.
text-align: center	Center aligns text. You can also use “left” (the default), “right,” or “justify.”
vertical-align: middle	Centers the text vertically.
width	Sets the width. We use % for width so elements can resize.