locked
data-win-bind : binding a background-image

    Question

  • Hi guys

    Having trouble binding a external background-image to a Metro App template.

    What I've seen used is :

     

    data-win-bind="style.backgroundImage: urlToImage;"

     

    Now, I've had no problem binding the "src" to images?

     

    I've also tried other things like

    backgroundImage

    background

     

    What I'm trying to say is, how do we do it properly?

     

    Thursday, November 3, 2011 7:28 PM

Answers

  • It looks like the style property setters won't actually set the property unless it's valid CSS.

    So you have your binding correct: data-win-bind="style.backgroundImage: urlToImage;"

    But you need to make sure that urlToImage has the "url('')" syntax like this:   url('/images/myimages.png')

     


    Senior Dev for Windows Phone Services
    Thursday, November 3, 2011 9:01 PM

All replies

  • It looks like the style property setters won't actually set the property unless it's valid CSS.

    So you have your binding correct: data-win-bind="style.backgroundImage: urlToImage;"

    But you need to make sure that urlToImage has the "url('')" syntax like this:   url('/images/myimages.png')

     


    Senior Dev for Windows Phone Services
    Thursday, November 3, 2011 9:01 PM
  • I can finally say bye to the ugly empty image box

     

    Awesome thanks.

     

     

    Friday, November 4, 2011 11:24 AM
  • Just remember that background images can be disabled if a user is in "high contrast" mode. Another way to get rid of the ugly empty box is to set the image.src to a placeholder, and then the databind will replace it. For example:

    <img data-win-bind="src: blobUrl WinJS.Binding.oneTime" src="../images/transparent.png" alt="loading..."/>

     


    Senior Dev for Windows Phone Services
    Friday, November 4, 2011 10:17 PM
  • does binding support nested source properties?

    If so, we could monkey-patch String like this:

    String.prototype.toCssUrl = function() {
      return "url(" + this + ")";
    }
    


    and set the property like this: data-win-bind="style.backgroundImage: urlToImage.toCssUrl;"

    :)

    Thursday, November 17, 2011 7:37 AM
  • backgroundImage needs a css URL format like url('...')

    data-win-bind supports converters. So you can write in HTML:

    data-win-bind="style.backgroundImage: urlToImage MyConverters.cssUrl;"

    And in JS:

     WinJS.Namespace.define("MyConverters", {

            cssUrl: WinJS.Binding.converter(function (url) {

                return "url('" + url + "')";

            }),

        });



    Thursday, April 11, 2013 9:06 AM