Picture of Paul Vincent
Background images
by Paul Vincent - Monday, 25 July 2016, 11:04 AM
 

I'm trying to find out how to add background images to my courses, but can't find an option for this. I've added the background switcher extension, and added images into this but I'm still not seeing any backgrounds on my pages. Can anyone tell me where I can find this option, or if they need to be added manually via css? 

 

Many thanks,

Paul

Picture of Gareth Walker
Re: Background images
by Gareth Walker - Monday, 25 July 2016, 11:45 AM
 

I think this would be something typically done via the CSS, by creating a class that you could add to a block or article, with the combination of background image/colour you wanted.

 

Picture of Paul Vincent
Re: Background images
by Paul Vincent - Monday, 25 July 2016, 12:34 PM
 

Ah ok; thanks Gareth, I didn't want to go reinventing the wheel if there was an option somewhere that I'd overlooked.

Picture of Chuck Lorenz
Re: Background images
by Chuck Lorenz - Monday, 25 July 2016, 1:25 PM
 

Hi Paul,
Perhaps the following response is too basic for you, but I want to offer this to any of the new folks who might be reading the forums.

Ultimately, CSS backgrounds (background-image, background-color) are indeed added via CSS. Some plug-ins (themes, menus, components, extensions) facilitate this by passing JSON values through to their templates or javascript. Typically CSS backgrounds are applied to articles and blocks. Use this basic model to add a background:
.mySelector {
    background-image: url(course/en/images.myImage.jpg);
    back-ground-repeat: no-repeat;
}


.mySelector must be legitimate CSS selector, of course. For your convenience, Adapt provides the “classes” property for most objects/structures. So, you can add a class to a specific article within its JSON in articles.json:
“classes”: “a-05”;
Be sure to add the corresponding class with a theme Less file. For this example, it might be appropriate add the following code to src/theme/adapt-contrib-vanilla/less/src/articles.less.
.a-05 {
    background-image: url(course/en/images.myImage.jpg);
    background-repeat: no-repeat;
}

The background-switcher is an example of an extension that has you specify background images in its json. Background-switcher is not for newbies. It is an advanced technique. I’d recommend that someone who is just getting comfortable with styling backgrounds avoid the background-switcher (uninstall if necessary). Get comfortable with applying background-colors to articles, blocks, and components. By starting with colors, you won’t have incorrect image URLs complicating your results. Then try applying an image. Images are most commonly stored in course/en/images (background-image: url(course/en/images/myImage.jpg);) or in src/theme/adapt-contrib-vanilla/assets (background-image: url(assets/myImage.jpg);)

Here’s a link to another post about using classes and backgrounds: https://community.adaptlearning.org/mod/forum/discuss.php?d=917

-Chuck