cancel
Showing results for 
Search instead for 
Did you mean: 

Problem faced in using image in sapui5

Former Member
0 Kudos

Hi Guys,

I am new to ui5 sorry for noob question.I searched all post before posting here.Help me build my first complete app using ui5.

I have following few questions related to setting image in ui5


<Image src="images/logo.png">

     

  • For the background of the login page i had set image via style now the problem is the image is fit exact its been cut or stretched how to make complete image fit exactly in the space?.Also is it possible to make the background image resolution responsive to different size window?

      

       Existing issue

      

       wanted like this

     

  • I am using a splitapp but its not having the background.how to bring the background shade.also it is possible to change it to some image background? I am using XML view

       

        splitapp i am using with no background shade

       

         splitapp with background shade.

        

     

        thanks

Accepted Solutions (1)

Accepted Solutions (1)

0 Kudos

Hi Deepan

1.     Move the images folder inside WebContent folder to make it accessible.

2.     To make the background image fit exactly to the screen, please use this CSS


.loginPageDiv {

     background-size: 100% 100%;

}

3.     Please apply following style to the app for the background shade


body {

     background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#2da9b1),color-stop(50%,#178299),color-stop(100%,#1a4c7d)) !important;   

     background-image: -webkit-linear-gradient(top,#2da9b1 0,#178299 50%,#1a4c7d 100%) !important;

     background-image: -ms-linear-gradient(top,#2da9b1 0,#178299 50%,#1a4c7d 100%) !important;

     background-image: linear-gradient(to bottom,#2da9b1 0,#178299 50%,#1a4c7d 100%) !important;

}

#content {

     max-width: 1280px !important;

}

Hope this solves your problem.

Regards

Shubhang

Former Member
0 Kudos

Hi Shubhang,

If the url is relative, we need to write CSS as:

.loginPageDiv { 

background-image: url('/a_practice/ui/webApp/download.png');   // this is my path where image is kept

    background-size: 100% 100%; 

If, this is correct, then its not working.

Please provide me with a solution.

Thanks,

Manessha

0 Kudos

Hi Maneesha

Can you show the folder structure?

Regards

Shubhang

Answers (2)

Answers (2)

Former Member
0 Kudos

Thanks a lot guys it helped me..

0 Kudos

Mention not.

Please mark the helpful and best answer from the above replies so that it is helpful to others too.

Thanks and regards

Shubhang

Qualiture
Active Contributor
0 Kudos

A diverse set of questions

  • Your images should go under the WebContent folder (that's what's visible/exposed by the webserver)
  • There are some jQuery plugins who does what you want, but you could also write your own logic, based on the window's width/height. And don't forget to attach it to the window's resize event handler so it will scale upon resizing too
  • I'm not really sure, but I think if you put your sap.m.App in an sap.m.Shell control, you will get the background on wider screens

Hope it helps!