How to add a background image to a page
Question
Application Type
Mobile

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

mvp_badge
MVP

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?


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