UserImage.jpg
Vasco Galvão
5309Views
8Comments
Background-Image
Question
Hi,

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
0
0
31 Aug 2014
I guess it should work if:
-Image was deployed to target directory
-you correct your css to
body{
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.
3
0
31 Aug 2014
Hi Nuno,

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

Thanksss

s
0
0
19 May 2015

Thanks. The guide worked for me.

0
0
15 Dec 2016

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?

0
0
15 Dec 2016

Hello.

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"

0
0
15 Dec 2016

How to add back ground image in outsystems .




0
0
26 Feb

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:



0
0
23 Oct

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.

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