locked
Background Image On LightSwitch Html Client Screen RRS feed

  • Question

  • I want to set an image as the background of a LightSwitch Html Client application.  This image would allow all controls to float over the top of it.   This sounds like it could be done in CSS but my experiments have failed.  I'm OK in setting this on each screen to achieve my desired affect in JavaScript.

    Any ideas or knowledge if this is possible?

    Thanks,

    Todd


    DataArtist

    Friday, April 25, 2014 7:02 PM

Answers

  • Hi Todd,

    It should work with this:

    .x360-ui-body-a,
    .x360-ui-overlay-a {
        background-image: url('background-image-url') !important;
    

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    Monday, April 28, 2014 3:24 PM
  • Thanks!

    I added the following into user-customization.css and it worked!

    .ui-body-a,
    .ui-overlay-a {
     background-image: url('background.jpg') !important;

    }


    DataArtist

    Monday, April 28, 2014 3:56 PM

All replies

  • Hi Todd,

    It should work with this:

    .x360-ui-body-a,
    .x360-ui-overlay-a {
        background-image: url('background-image-url') !important;
    

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    Monday, April 28, 2014 3:24 PM
  • Thanks!

    I added the following into user-customization.css and it worked!

    .ui-body-a,
    .ui-overlay-a {
     background-image: url('background.jpg') !important;

    }


    DataArtist

    Monday, April 28, 2014 3:56 PM
  • Whilst the technique covered in this post works well, I've noticed one small issue which I'd like to understand.

    In my test, I'm using the following entries in user-customization.css: -

    .ui-body-a,
    .ui-overlay-a {
        background-image: url("http://i.s-microsoft.com/global/ImageStore/PublishingImages/logos/hp/logo-lg-1x.png");
    }

    The following screen-shot from the test shows the fully loaded home screen with the background image repeated from the top left of the screen (as expected and required): -

    However, the following shows the standard loading screen with the background image unexpectedly positioned further down (from the top of the loading image): -

    Whilst this isn't a significant issue, it does cause a slightly jarring transition when the html client initially loads and I'd like to understand why it occurs and how best to resolve it.

    From delving into the standard lightswitch css, I've determined that this issue can be resolved by removing the 'border-width: 0px' style from the #msls-id-app-loading rule.

    However, I'm puzzled as to why removing the border-width resolves this issue and why the body of the loading screen appears to inherit the 5% margin top of the loading image (.msls-app-loading-img).

    Hopefully someone with a more in-depth understanding of css can clarify what's happening.

    Thanks,

    Chris


    Friday, August 15, 2014 10:03 PM
  • This is specific for Xpert360 themes obviously.
    Sunday, June 19, 2016 2:37 AM
  • Unfortunately this no longer works, because the background image repeats separately in the header.  I had to go down a DOM level to get it working:

    body, body.msls-show-background-screen {
        background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.2)), url("Images/Wallpaper2.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position-y: 80%;
    }
    .ui-body-a {
        background: transparent;
    }
    .msls-dialog-frame, .ui-popup-container {
        background: whitesmoke;
    }


    • Edited by harvest316 Sunday, June 19, 2016 2:40 AM
    • Proposed as answer by harvest316 Sunday, June 19, 2016 2:40 AM
    Sunday, June 19, 2016 2:39 AM