How can I bind the CSS background-image property?

Question

Is it possible to make a style background-image binding?

I tried this code:

<div data-bind="foreach: itemList">
    <div data-bind="style: { background-image: 'url:(temp.png)' }">some text</div>          
</div>

I also tried backgroundImage, without quotes in url, without : after url, but it's still not working. All the others, like color or backgroundColor bindings are working perfectly.

Solution 1

As stated in the documentation, you need to use the Javascript name for the style you want to control.

This means that you would have to use backgroundImage instead of background-image.

Something like this:

<div data-bind="foreach: itemList"> 
    <div data-bind="style: { backgroundImage: 'url(temp.png)' }">some text</div>
</div>

Solution 2

I'm not sure why everyone (except Sujesh) is answering this question and still hard coding the temp.png. If you are not binding to a ko.observable property then don't use data-bind. Just use the standard style property of the html element.

<div data-bind="foreach: itemList">
    <div style="background-image: url('temp.png');">some text</div>          
</div>

For data binding to get the url I wish Sujesh Arukil's answer worked for me but it didn't. If anyone has that working, please enlighten me.

Here is what worked for me but I don't care for it. I used a computed to get the value of the background-image.

In the view model

self.imageUrl = ko.observable();

self.bgImageUrlStyle = ko.computed(function() {
    return "url(" + self.imageUrl() + ")";
});

In the HTML

<div data-bind="style: { 'background-image': bgImageUrlStyle }">
</div>

Solution 3

By the way, you can set up a custom binding to make the syntax less unwieldy:

ko.bindingHandlers.backgroundImage = {
  update: function(element, valueAccessor) {
    ko.bindingHandlers.style.update(element,
      function(){return {backgroundImage: "url('" + valueAccessor() + "')"}});
  }
};

Then in your HTML you can do

<div data-bind="backgroundImage: image"></div>

Solution 4

You don't need the : in the url section for a background image, it is just url(/foo.png).

Your binding also needs to use background-image since that is the style property, but in quotes, like so (backgroundImage is the JavaScript API for style):

<div data-bind="style: { 'background-image': 'url(https://www.google.com/intl/en_com/images/srpr/logo3w.png)' }"></div>​

Live demo here - http://jsfiddle.net/slace/EgUaM/

Edit After posting the example Github started experiencing database issues so here's an alternate jsfiddle - http://jsfiddle.net/slace/EgUaM/1/

Solution 5

or just concatenate

<div data-bind="style: { backgroundImage: 'url(\'' + $data.videoImg + '\')' }"> </div>

View more solutions

Comments

[Luka Siric]

i red the documentation, and there's also a link to most of the javascript style attributes too : comptechdoc.org/independent/web/cgi/javamanual/javastyle.htm‌​l, it says use "regular" tag names for tags that don't have javascript names :/

[Mikael Östberg]

I know they use the single quotes for the attr binding and perhaps this works the same way now and the docs just aren't up to date. Actually, when I think about it I think I had problems with this one before.

[BayOtter]

Easy solution is to use a css class instead of a style :-)

[frostymarvelous]

@John Papa I disagree... If you have multiple items with different images, that won't be feasible!

[frostymarvelous]

You can use the css names with hyphens by wrapping the whole name in quotes!

[Jed]

This should be the accepted answer. Clean, concise, and super easy to use & reuse.