My method for changing the page header background is as follows:
In the Project settings of a course add the following to the Custom CSS/LESS code:
background-position: center top;
where xxx.jpg is the filename of your header image (you may need to change the filename later if you decide to store your image on a course page--see later). Edit the page on which you want the header image to appear and add your new class name, i.e., in the above example it's
page1-header-image (without the leading period) to the Classes text box in the page's Settings. You can also change the page header colour by adding:
or whatever colour you have defined in your colors.less file (see Chuck's wonderful How to test background colors using "_classes" thread for more).
To change the font colour (in cases where the default font colour is unreadable against your new background) add:
between the last two curly brackets of the custom CSS code above. Again, you can use any Less colour variable defined in your colors.less file or any of these built-in theme variables.
Note that at this point your page background image will not be rendered when you preview the course (although any colour changes will be). The final step is to make sure your new page background image is available to your course. You can either:
- manually add the image file to the course/assets folder in the course zip archive once you have downloaded the course, or
- use Nick's cunning idea and add your images to an unavailable/hidden page (as detailed in my post above).
If you have multiple pages on which to add header background images you'll need to replicate the code with a unique class name.
What other simple customisations are people using with the Authoring Tool?