How to add a background image to a container in UI Builder?

gjz
Mega Sage

I am creating landing pages to use in San Diego for our users and would like to add our company's background image to the landing page.  However, I'm new to UI Builder and CSS and can't figure out how it's done.  The image is already stored in ServiceNow (System UI > Images) and I copied the URL to use in the CSS, but it isn't working.  I googled examples of using a background image in CSS and looked at how the OOB Landing page background image is created in CSS, but I still can't figure it out.

Using an OOB image in System UI > Images, this is what I ended up with:

* {

    flex-direction: column;
    flex-wrap: nowrap;
    display: flex;
    padding-left: 3rem;
    padding-right: 1rem;
    margin-bottom: -1.5rem;
    height: 100%;
    min-height: 200px;
    background-image: url("https://<my instance>.service-now.com/nav_to.do?uri=db_image.do?sys_id=beab126087413300e0ef0cf888cb0ba9");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: right;
}
 
Can someone help me with this, please? 
 
Also, how can I make the URL instance-ignostic so it's the same for all my instances?
 
Thanks!
5 REPLIES 5

Drew Carpenter
Tera Expert

Next question, seems very very basic - how to make these images clickable (without having to create a button and add an image to that)?