CODEWITHSUNDEEP
angularjs
Nicolas Zozol
Nicolas Zozol

Reputation: 7038

Angular : ng-style not working with background image

Without directive, that works and display kitten

    <section class="slide-show" style="background-image:url('http://placekitten.com/g/1000/175')">
        hello
    </section>

With ng-style, that fails :

<section class="slide-show" ng-style="{'background-image':url('http://placekitten.com/g/1000/175')}">
  hello
</section>

However using ng-style with background-color works :

<section class="slide-show" ng-style="{'background-color':'blue'}">
   hello
</section>

Is there a typo, or something I missed with Angular ?

Upvotes: 1

Views: 2351

Answers (1)

Antiga
Antiga

Reputation: 2274

The whole value of background-image should be inside of a string when using ng-style.

Try this:

<section class="slide-show" ng-style="{'background-image':'url(http://placekitten.com/g/1000/175)'}">
  hello
</section>

It's also worth mentioning you don't need quotes for the background-image CSS property.

**Syntax**
background-image: none
background-image: url(http://www.example.com/images/bck.png)

background-image: inherit

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

Upvotes: 4

Related Questions