Background Image in the Canvas Catalog

[RachelleLawrenc]

Hi There, 

I'm looking in the Canvas Catalog for my shop front to have a background image instead of the white background we currently have. 

I can see in the example below it has been done however I cannot find the setting.



Thankyou for any support and guidance that can be provided 🙂

Rach 

[jsowalsk]

@RachelleLawrenc It is customized by javascript.

[RachelleLawrenc]

@jsowalsk  Thanks so much! Do you know where I can access the ability for a javascript? 

[jsowalsk]

@RachelleLawrenc I would suggest looking here: https://www.w3schools.com/js/js_graphics.asp

[chriscas]

Hi @RachelleLawrenc,

Just for clarity, are you referring to the black and blue graphic above the search bar, or the gray connected dots behind and towards the right side of the course listings?

-Chris

[JessieJohnnes]

Hi Chris,

I'm actually looking for how to do the JS for how to do a graphic header like the blue and black one in this example. Do you know any resources for how I can do that?

Thanks! Jessie

[jsowalsk]

@chriscas FYI.

[chriscas]

Hi @JessieJohnnes,

I have the "new storefront" enabled, which makes this very easy to do.  I can just adit the catalog theme and enable the cover image option as shown here, then choose the image i'd like to use.

Is the new storefront something you'd be able to turn on, or are you still using the legacy storefront and don't want to switch over yet?

-Chris

[JessieJohnnes]

Hi Chris,

Ahhh, yes, we are still on legacy; we really like having more customizing control for some other features. I'll have to do more digging on the JavaScript I need. Thank you for responding!

Jessie

[chriscas]

@Hi @JessieJohnnes ,

In that case, I think you'll want to use css not javascript.  Try something like:

#feature {
height: 100px;
background-image: url("https://www.institution.edu/image.png");
background-size: cover;
}

Just replace the URL with a proper link to the image you want to use (I don't think you'll be able to host that on catalog itself).  I believe this will work, but I haven't tested it myself as I don't really want to play around with this even on my beta instance at this time.

-Chris

[JessieJohnnes]

Hi Chris, 

wow, thank you so much! This worked famously; this has definitely saved me time, and I am so grateful for your help and input!

Jessie

[RachelleLawrenc]

Hi @chriscas,
The gray connected dots behind and towards the right side of the course listing 🙂