I would like to know if it's possible to set a background picture in background of the page. I already try with css 3, like i use in my projects in html 5 but it doesn't work. I want to apply a picture in the body, and isn't working. 

my code...

 background-image: url(/img/Caves.jpg); 
    background-size:  100%;
    background-attachment:  fixed;
    overflow:  scroll;

Thanks in advance

Best regards

Vasco Galvão
I guess it should work if:
-Image was deployed to target directory
-you correct your css to
background-image: url('img/Caves.jpg');
background-size:  100%;
    background-attachment:  fixed;
    overflow:  scroll;

(img folder will be inside your app folder)

If not, check the help https://www.outsystems.com/help/servicestudio/8.0/Miscellaneous/Displaying_images/Using_Background_Images.htm

If everything fails, you always have the option of creating a container with the image and then in Container Style use position: absolute and a high z-index.

I think the containers will overlap the background completely, that you'll have to solve somehow.
Hi Nuno,

I tried as well but id didn't work, any suggestion?
What could be wrong?



Thanks. The guide worked for me.

Hi Simone,

Did you check you are using right extension of the image? One thing to note is that in version 9 and earlier, svg images don't work. 

Can you post a sample oml of how you are doing it?


In this case it is necessary to ensure that the image has the eSpace name on the link. 

The link should be: "/eSpaceName/targetDirectory/image.png"

How to add back ground image in outsystems .

Hello, Manoj

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('');}

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

1. Upload image into Images folder in Interface > Elements

2. Open your CSS

3. Drap and drop that image into your CSS

code for it will be generated.

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