Start a new topic

Putting banner image behind text

Hi Cidi Labs folk,


We're looking to tweak our homepage banner style in a way that satisfies requests for using stock images whilst preserving precious screen real estate. The screen shot attached shows our desired style with text on top of an image. Is this possible to implement out-of-the-box? If not, how do we go about implementing custom code? 


Many thanks for your time, Isobel


Hi Isobel,


The best way to do that would be using the CSS background-image property. However, Canvas strips that of the rich content editor if you try and use it inline and Canvas only allows CSS stylesheets at the account level. There is an option to create a CSS stylesheet at the course level using Design Tools but due to how Canvas handles JavaScript, it results in a flicker effect where you would see the content without the CSS and then it would apply a fraction of a second later. The course level CSS also doesn't work on the Canvas mobile app.


If you wanted to implement something like this at the account level, here is an example of what the CSS might look like:


#kl_wrapper_3.kl_flat_sections #kl_banner {
    background: url(https://path/to/image.png);
    background-size: cover;
}


I have had a few thoughts about alternative ways of doing something like that but I have always been a little hesitant due to accessibility concerns. It is really easy to come up with image/text combinations that would not meet accessibility guidelines. Your screenshot example would definitely meet contrast requirements but a lot of text banners that I have seen people create would not and I have not been able to figure out a way to test the contrast so that I can help people avoid that pitfall. I struggle when it comes to developing things that make it easy for people to create content with poor accessibility.

Hi Kenneth, totally agree with your stance on doing everything possible to discourage inaccessible content. Thanks very much for your advice, we'll see if we can make it work in our test environment. If we're to change the account CSS, we'll need to pick an image, we can't swap it out at the course level -  is that right? 


 

Yes, that is one of the major drawbacks to only being able to add CSS stylesheets at the account level.

Login or Signup to post a comment