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.

Answer 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>

Answer 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>

Answer 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>

Answer 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/

Answer 5

or just concatenate

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

Answer 6

based on KO documentation,

VALUE to be SET to any Property in KO is ViewModal Property Value.

where somepath = ViewModal Property that is PATH to your background image.

Answer 7

When there are two names, use the first name in lower case and the first character of the second name in upper case. Examples:

color = color
background-color = backgroundColor
font-style = fontStyle
font-weight = fontWeight 

please refer to http://knockoutjs.com/documentation/style-binding.html and http://www.comptechdoc.org/independent/web/cgi/javamanual/javastyle.html

Answer 8

Just put quotes (single quotes) around the property name. whenever your have - in the property name e.g. background-image or background-url you need to put quotes around the name

<div data-bind="style: {'background-image' : 'url(somepath)'}>

That is the problem. Mentioned in the Knockout documentation.

Answer 9

When u say: data-bind:"{...somecode...}" you need to understand that u are inside of javascript. If you write: background-image he tries to subtract image from background (background-image). Thats are undefined variables. Then it is much clearer.

Answer 10

<div data-bind="style: { background: 'url(' + imageUrl + ')' }" ></div>

The above one i used suppose to work.

If you usebackground: 'url(imageUrl)', it will consider as a string only.