Support for inline background images

[oskarrough]

Hi, do you have any plans to support replacing inline style background images? Or would you recommend turning the already replaced <img> tags to whatever I need using the onImagesReplaced event?

Looks like this fork implemented it: https://github.com/firegoby/Imager.js

[thom4parisot]

Hello,

There is no plan yet but that should not be that difficult to add as it is the same replacement logic.

Instead of doing image.src = newUrl it would be image.style.backgroundImage = newUrl.

In any case, this is something you can achieve through CSS and media queries. Which is not the case of regular image SRC.

[oskarrough]

Would be great. I can't use media queries as a CMS is outputting all the inline background images.

[thom4parisot]

👍 okay, I'll check this out then.

[IainIsCreative]

Is there any update or progress on allowing Imager.js to work on inline background images?

[thom4parisot]

@iainspad not at the moment: I started something without ever finishing it. If you have an idea on how to do it, please propose something (or explain first how you would do if you are not comfortable yet to propose code).

[Dobby89]

+1

[Dobby89]

Looks like this has already been done as part of this fork: https://github.com/firegoby/Imager.js

Demo here: http://firegoby.com/imager-cssbackgrounds/

Will this be something you plan on adding?

[thom4parisot]

Hey guys,

the work has been documented in the feature-88 branch. For some reasons tests do not pass on iOS5 and iOS6 so I suppose some regression hides between the lines.

Feedbacks appreciated!

[dennishall1]

Any chance at this landing within the next month or so? The use case is this: You want an image to be controlled by a cms or database field .. and output as an inline background image, such as <div style="background-image:url('path/to/image.jpg')"> It would be very unwieldy to override that in css, as it would have to be done with an inline style block that appeared right after the div in the html of the page (<style>...@media ... #ID-OF-DIV { background-image: url(path/to/background.jpg) !important; } ...</style>) .. Yeah, you'd have to have it in a style block in the page so the cms can output the image path .. and yeah, you'd have to use !important in order to override the inline style attribute on the div tag. Let's use Imager.js instead, right?