How to set page's background with image
Question

Dear all

I have imported an image to my module.

and want to make the image as the page's background.

I have searched the key word [background] from Forums,there are some posts for container but not for page.


Solution

Why didn't you just add it to to your page css stylesheet?


Should be something like this:

body {
    background-image: url('/MHPS/img/background.png');
}

João Rosado wrote:

Why didn't you just add it to to your page css stylesheet?


Should be something like this:

body {
    background-image: url('/MHPS/img/background.png');
}

Thank you for your answer.

I think this is the better method.

I have tried it, it worked well. 

Thank you very much.

I got it.

I added this to Page.javaScript property.

    $(document).ready(function() {
        $('body').css('background-image', 'url(/MHPS/img/background.png)');
    });
Solution

Why didn't you just add it to to your page css stylesheet?


Should be something like this:

body {
    background-image: url('/MHPS/img/background.png');
}

João Rosado wrote:

Why didn't you just add it to to your page css stylesheet?


Should be something like this:

body {
    background-image: url('/MHPS/img/background.png');
}

Thank you for your answer.

I think this is the better method.

I have tried it, it worked well. 

Thank you very much.

Hi Wang,


Even I was having the same question as how to set a background image or add different color gradients to the screen. I had chalked out the solution and sharing the same with you below:


1. For adding background image to you main content, you need to open up the 'CSS' icon on the mid-top-left of your service studio screen


2. Then click on 'Base Theme' option and copy all the content/code from that window (use Ctrl+A from your keyboard)


3. Now click on your app name (you'll find it on top of your screen just beside 'Base Theme' and paste that copied content/code


4. Now go back to your app screen and double click on background of your main content i.e. where you want to set the image or color gradient and then again open up the 'CSS' icon on the mid-top-left of your service studio screen


5. Now you have to look for -


.main-content  {

    -servicestudio-display: flex;

    -servicestudio-flex-direction: column;

}

 6. Now here you can add image or any other related requirement for example I had added color gradient as you can see below


.main-content  {

    -servicestudio-display: flex;

    -servicestudio-flex-direction: column;

    background-image: conic-gradient(red, yellow, green);

}

Hope this help and resolve your issue.


Cheers,



Kunal Dhoble

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