Help with changing background image within app

3 posts, 0 answers
  1. Allan
    Allan avatar
    2 posts
    Member since:
    Jan 2014

    Posted 23 Jan 2014 Link to this post

    I currently have 4-5 views in my app, I use a flat scheme, and I use same background image which I set in CSS:

    .km-flat .km-view .km-content {
        background-image: url(../styles/images/background11.png);
        background-size: cover;
        background-repeat: no-repeat;

    I want to have a function where a user can choose another background image.  I've implemented a listview, where I get the item the user selects and then I implement a switch case as follows. 

                        case "1":
                            $(".km-flat .km-view .km-content").css('background-image',"url('./styles/images/background11.png')");
                         case "2":
                            $(".km-flat .km-view .km-content").css('background-image',"url('./styles/images/background12.png')");
                         case "3":
                            $(".km-flat .km-view .km-content").css('background-image',"url('./styles/images/background13.png')");
                         case "4":
                            $(".km-flat .km-view .km-content").css('background-image',"url('./styles/images/ background14.png')");

    However I am not getting the desired results.Sometimes the image only switches for 1-2 view instead of all views.  I also get an ugly screen flash when I navigate between views.  It's as if every time I pick a new view, the new background image keeps being reset/updated which results in the screen flash

    Can someone help me resolve these bugs?
  2. Kiril Nikolov
    Kiril Nikolov avatar
    2598 posts

    Posted 27 Jan 2014 Link to this post

    Hello Allan,

    Using this approach you are only changing the background-image for the views that have been initialized. If a view have never been navigate to it does not have content container in it, so you are practically not changing its background image. 

    An alternative approach would be to use the data-init event of a view to set its background-image to, so you will make sure that the view has all its containers initialized, and you can actually set their background image.

    Kiril Nikolov
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  3. Kevin
    Kevin avatar
    47 posts
    Member since:
    Nov 2012

    Posted 19 Feb 2014 Link to this post

    What I would do is make a function that you execute in each view's show event. Store your chosen background in localstorage when they select it then have the show method check it, and set the background using that value. That way anytime anybody navigates to the view it'll check what the bg is supposed to be and set it. I'd also google some javascript image preloading code to implement on app start so there won't be any waiting time to load each bg when you switch
Back to Top