How to add a background image to a page
Application Type

I need to use an image as my screen background.  I'm fairly new at this platform.  It would be helpful if I could see an example in a sample page.  I'm sure I can use that to implement in my own pages.  Thanks


Hello Tom,

Hope you're doing well.

I believe that you just need to import the image that you pretend in Service Studio:

Then you just need to add it to your screen CSS stylesheet:

body {
    background-image: url('<your-image-URL>');

You can copy the URL from the Runtime Path property from the image:

Hope that this helps you!

Kind regards,

Rui Barradas

Thanks for you reply.  Actually I had tried that to no avail.  Turns out I need to add a 'width' and/or a 'height' to the body in order for the background image to show up.  I just arbitrarily came up with the width/height values since the actually size isn't known and it doesn't seem to matter what values I put in there... just as long as there is at least a width or a height or both.  I ended up with this:

body {

    background-image: url('/images/bgimage.png');

    background-position: center;

    background-size: contain;

    background-repeat: no-repeat;

    width: 50px;

    height: 40px;


The problem now is that the bgimage is displayed over the rest of the elements on the page. I assume  z-index is the culprit since I see all the page elements for a split second and then the bgimage renders on top.  I've tried both putting  background z-index: 0;  and  z-index: 0; in the body - no luck.  Any ideas?

Hi Tom,

Please check the following link as I had posted the answer for the same:


Kunal Dhoble

2023-05-11 20-12-18
Emma Stone

Hello. Thank you. It's very useful information for  me. 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.