Remote background-image

I know I can apply a background image to the content like that:


background-image: url(#{$image-path}/background.png);

But how can I apply a remote url image to the background (saving in the local storage)?

Thank you,


you have to do this in your angularJS code --> download the remote file and add the styling stuff to dom-nodes with the class scroll-content

Ok, I’ve downloaded the image using the plugin:

$ionicPlatform.ready(function() {

if (window.cordova) {
  var _bg = "";

  $, window.cordova.file.dataDirectory + "background.jpg", {}, true)
  .then(function(result) {
  }, function(err) {
    // Error
    $scope.showAlert("Error:" + JSON.stringify(err));
  }, function (progress) {
    $timeout(function () {
      $scope.downloadProgress = (progress.loaded / * 100;


But now, how can I apply the image to the scroll-content?

Thank you in advance!

  1. Why didn’t you directly set remote url in css?
  2. If you want to downlaod it first, then you can convert it to base64 string and usi it in ng-src
  1. I need to download and save the background to make it work without connection too.

  2. How to do it? Can you help me? I don’t know how to apply it to the class .scroll-content of ionic…

You can use cordova-file-transfer plugin to download files:

after that you need to add the background manually or via javascript.

Please, read my messages, I am using the plugin, I know how to download, what I don’t is how to apply the local file to the .scroll-content class.

And using using this:

I know I can download files too, but again. I don’t know how to apply the file to the class.

Thank you.

like i said you need to set it vial javascript … i think there is no way to add this afterwards --> your DOM is rendered before the download has finished.

Maybe you can use javascript selectors to select all .scroll-content elements and add the background image for those elements.


Any help, please?

you could do something like this:

  1. listen on $ionicView.beforeEnter
  2. there you can do something like this document.getElementsByClassName(’.scroll-content’)
  3. now you can set the background-image for all the elements to your download file.

you can use ng-style to set background image once it is loaded.

But first convert it to base64

Ok, thank you.

I’ve found a way to implement cache using:

I’ve applied the image to the .scroll-content:

	background-image: url(;

In my app.js:

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {

ImgCache.options.debug = false;
ImgCache.options.usePersistentCache = true;
ImgCache.options.chromeQuota = 50*1024*1024;     

// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {

if (window.StatusBar) {
  // org.apache.cordova.statusbar required

ImgCache.init(function() {
    console.log('ImgCache init: success!');
}, function(){
    console.error('ImgCache init: error! Check the log for errors');

And created a directive:

.directive('cacheBackground', function($timeout) {
return {
    restrict: 'A',
    link: function(scope, el, attrs) {      
        // timeout to give time to init imgCache
    	$timeout(function() {
    		ImgCache.isBackgroundCached(el, function(path, success) {
	            if (success) {
	            } else { 
	                ImgCache.cacheBackground(el, function() {
    	}, 200);


Modified DomHelpers.getBackgroundImage in imgCache.js to use getComputedStyle even when we have jQueryLite:

DomHelpers.getBackgroundImage = function (element) {

    if (ImgCache.jQuery) {
        return element.attr('data-old-background') ? "url(" + element.attr('data-old-background') + ")" : element.css('background-image');
    } else if (ImgCache.jQueryLite) {
        var style = window.getComputedStyle(element[0], null);
        if (!style) {
        return element[0].getAttribute("data-old-background") ? "url(" + element[0].getAttribute("data-old-background") + ")" : style.backgroundImage;

    } else {
        var style = window.getComputedStyle(element, null);
        if (!style) {
        return element.getAttribute("data-old-background") ? "url(" + element.getAttribute("data-old-background") + ")" : style.backgroundImage;

And then I’ve applied the directive to ion-content in my view:

<ion-content cache-background>

And now the background-image is working offline too.

Thank you Ionic!

How do you do this in ionic 2?