Single view

Name: Boost Image Preset

This Boost Preset sports a full screen image for the login page and a header image.  You can customize both images by changing the URL as described below.  Updated to work with Moodle 3.5 with Boost and Fordson themes.

 Use your own image

Important:  Change the default image URL in the file before uploading to your moodle server.  

Open the preset with a text editor such as notepad.  Find and change the following code in "bold" below in your preset file.  You will need to find an image on the internet preferably with a width larger than 1024px :

#page-header .card {
height: 225px;
background: url();
 background-size: cover;
 background-position: center;

and the second place to change the image is:

body#page-login-index {
 background: url();
 background-size: cover;
background-position: center;

Course Page with Header Image


Moodle Login Page



  • Version 1.2 fixes some CSS issues that popped up between beta and release versions of Boost.
  • Version 1.3 added a background color to the edit cog in the header.  It also changes the height of the header image to be smaller once inside a course activity.  

Version: v1.3
Moodle versions: 3.5
Preset file: text/x-scss preset-BoostImage.scss
Entry added by Chris Kenniburg - Saturday, 5 November 2016, 12:34 AM
Last modified - Wednesday, 13 June 2018, 3:28 AM