How to add a background image to a page

Back to Forums

Tom Meehan

Solved

How to add a background image to a page

Question

Mobile

Forge

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

20 Sep 2021

Rui Barradas

MVP

Solution

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

20 Sep 2021

Tom Meehan

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?

21 Sep 2021

KUNAL DHOBLE

Hi Tom,

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

https://www.outsystems.com/forums/discussion/70990/background-image-set-using-theme-editor/#Post329375

Cheers,

Kunal Dhoble

23 Jun 2022

Emma Stone

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

11 May

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

See the full guidelines