Adapt Learning Community: Article Image Background

Hello,

We are attempting to create a course with an article image background to signify a new section on the page for learners. We are using a purple rectangle with a diamond on the end as seen in the images below. For some reason, the size of the background changes based on the length of the article. As you can see in the image below, the purple rectangle with diamond is smaller in the Harassment article than it is in the Stalking article (and the stalking article contains fewer blocks.)

I have attached the file for the large version of this image.

We have used the following settings in the authoring tool:

Set if/how the background image repeats = no-repeat

Set the size of the background image = contain

Set the position of the background image = left top

This only appears to be an issue with desktop and tablet devices.

We were able to change the value of the background-size to 75% instead of contain using the Inspect option but aren't sure how we would do this in CSS or if it is even possible.

We are using

Authoring tool version 0.10.5
Framework version 5.12.1

Hi Sherri,

Hope all is well.

There may be a couple of ways to resolve the issue at hand depending on how comfortable you feel with editing the image or using the custom less/css text area within the Authoring Tool.

1) Create the image at the size of the asset. The asset attached above is 8002px by 1669px which is quite a lot wider than the default Adapt max width (1440px). If the asset of the diamond and rectangle were roughly the actual size of the image (~160px wide by ~80px high) then you could use the inbuilt backgroundSize property to size it appropriately.

2) Add a custom class to the articles that you wish to apply the image to and add something similar to the following to the custom css/less text area in project settings:

.custom-class { background-size: 75%; }

(Replace 'custom-class' with the name of the class that you use)

Show parent | Reply