Skip to Content
avatar image
Former Member

Problem faced in using image in sapui5

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

log.JPG (19.9 kB)
ff.JPG (189.6 kB)
ff.JPG (379.0 kB)
Capture2.JPG (38.7 kB)
Capture.JPG (73.8 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Best Answer
    Dec 30, 2014 at 10:20 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Dec 30, 2014 at 09:35 AM

    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!

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Jan 02, 2015 at 11:53 AM

    Thanks a lot guys it helped me.. 😊

    Add comment
    10|10000 characters needed characters exceeded