Yes, I have. This code adds a picture to each “carousel” of course tiles belonging to a particular catalog, and it outlines the catalogs in a light gray color.  In this example, the background image is the color-coded “key” in the upper right corner of each “carousel”:

.ui-carousel {
    border: 1px solid lightgray;
    padding: 20px 20px 0px 20px;
    margin: 10px 0px 0px 10px;
    border-radius: 25px;
    background-image: url("YOUR PICTURE's URL HERE");
    background-repeat: no-repeat;
    background-size: 300px 15px;
    background-position: 94% 1%;
}

Result:

This is very nice @elamast I really wish we could impact the mobile app too so that these types of custom experiences could be done more without any negative of having a very different expereince.

I want to replace the title of catalog and description with the following image. Does the code you provide do that?

No, his does not do that, just to clarify you are trying to essentially add a background image to the top area of the page as a whole, not on the widgets themselves?

Yes, spot on.  Do we know if you can remove or alter it with CSS? 

Yes, I have. This code adds a picture to each “carousel” of course tiles belonging to a particular catalog, and it outlines the catalogs in a light gray color.  In this example, the background image is the color-coded “key” in the upper right corner of each “carousel”:

.ui-carousel {
    border: 1px solid lightgray;
    padding: 20px 20px 0px 20px;
    margin: 10px 0px 0px 10px;
    border-radius: 25px;
    background-image: url("YOUR PICTURE's URL HERE");
    background-repeat: no-repeat;
    background-size: 300px 15px;
    background-position: 94% 1%;
}

Result:

 

I think she is wanting to have an image display as the header catalog at the top of the page.  Though what you have here is very cool.  Thank you for sharing. 

I want to add icon image to the Laboratory Water catalog like we have for Chemistry, Environment etc.- Pls help urgently

@arnab.duttagupta - forgive me if I misunderstand, but aren’t those just images that are being rendered on a custom page?

I am not sure there is any CSS customization in Docebo being done here but rather placing that icon with the rest of the image was probably done using another tool and then including that image with the others on the page.

If I am mistaken - could you perhaps clarify further?

Agree, this looks like they are bringing in the coming soon image somehow but the others just look like a regular background image for a custom widget box. I am curious how they are identifying the ones to add the coming soon too, wonder if it is as simple as children selectors?

IThanks for the fast response, I am not sure if other tools were used, I want this image to be on the background like the others-

The repository where the icon images are kept is also not working so we are not able to upload-

material-science-icon{
left: 87%;
background-image: url("https://cdn2.dcbstatic.com/files/l/e/learnatm_docebosaas_com/userfiles/13139/Icons/material_science.png")

Does this help?

https://community.docebo.com/product-tips-tricks-3/engaging-home-page-layouts-2099