css & angular - background image loading dynamically with greyscale

Question

Im going to transform picture above like this as background photo in CSS. Im using angular.My goal is to change photo path for every new item in my list. For now on styles are hardcode, so image is constant, and everything is working.

When I try to change image by

style="background: url({{item.photo_path}})"

it is changing, but without greyscale and opacity etc.

Image: enter image description here

Fiddle here.

Is this what you're trying to do ?? jsfiddle.net/ctu88jdj/14 — Manish Kr. Shukla
– Manish Kr. Shukla, Commented Jul 10, 2015 at 10:59
I try to overwrite hardcoded image url in grayscale CSS class. The issue is filters declared in class are not working, when i use inline styles to do it. Answer I expect is the way to replace background image on fly with working filters — Janko
– Janko, Commented Jul 10, 2015 at 11:12

Shubham Nigam · Accepted Answer · 2015-07-10 11:18:47Z

1

I did what you want to do with HTMl

<body ng-app="app">
<div ng-controller="MyController" class="ibox blog background-photo" >
    <div  ng-repeat="element in events">
        <img ng-src="{{element.path}}" class="desaturate"/>
    {{element.path}}
    </div>
  </div>

Controller

var modul = angular.module('app', []);

modul.controller('MyController', function($scope){

    $scope.events = [{path: 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQHlKwDrqoGMi34rBHhCCzweO5GoedRt2U2iA_UBQfx1VZcKGkkPw'}];
});

CSS

img.desaturate{
-webkit-filter: grayscale(100%);
filter: gray; filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
}

Working DEMO on fiddle : https://jsfiddle.net/ctu88jdj/17/

I hope this will help you

answered Jul 10, 2015 at 11:18

Shubham Nigam

3,97621 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Janko Over a year ago

Your approach is quite close. The solution is:

Janko Over a year ago

Your approach is quite close. The solution is: put another div with position:absolute; top:0; width: 100%; background:url(''); under div with content with relative position; background: transparent; This will cause that background url can be change dynamically, and styles will be saved.

Shubham Nigam Over a year ago

Good to hear that you got solution If my answer helped then click on right icon

Janko Over a year ago

Your approach is quite close. The solution is: put another div with position:absolute; top:0; width: 100%; background:url(''); under div with content with relative position; background: transparent; This will cause that background url can be change dynamically, and styles will be saved. Bug in this approach was that, styles didnt work at background image if onlu url were overwritten, or worked on all div, becouse pseudo selectors arent avilable at style attr of div

Collectives™ on Stack Overflow

css & angular - background image loading dynamically with greyscale

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related