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

[gjz]

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!

[Maik Skoddow]

Hi

please follow the instructions on https://developer.servicenow.com/dev.do#!/learn/courses/sandiego/app_store_learnv2_uibuilder_sandieg...

Kind regards
Maik

[gjz]

Hi Maik,

Thanks for the link but it only answers part of my question.  Since I'm creating new landing pages that means I'm using the OOB experience Unified Navigation App, which means I can't open the application in Studio and add an image.  How can I take an existing image that is already stored in ServiceNow and use it in my landing page?

[Drew Carpenter]

This worked for me:

    background-image: url('/{image_name.extension}');

    background-size: auto;

    background-position: center;

    background-repeat: no-repeat;

[Drew Carpenter]

Next question - how do we make these images clickable? Seems very very basic.