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