button, 
button:active, 
button:focus {
    outline: none;
}

Если вы именно у одного блока хотите задать двойной фон то так:

.wrapper {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, green 50%, red 50%);
}

Да бога ради, я вообще не встречал более удобной системы для натяжки своего диза на движок, чем есть в modx-се. Так что делайте все как обычно, хоть с gulp, хоть с webpack-ком (тут пишу про то с чем сам работаю). Весь процесс выглядит примерно так:
1) Кидаете финальный билд фронта на ftp (обычно это папка assets/templates/тут название вашего шаблона);
2) Далее в админке создаете шаблон, или открываете стандартный, копируете туда свою разметку.
3) Правите пути к js-сам, картинкам и css-сам.
4) У тут просто открываете страницу с этим шаблоном и радуетесь тому на сколько вы красава).

Ну а там конечно уже разбиваете шаблон на чанки, а где предполагается вывод динамического контента узайте сниппеты, коих много на любой вкус в репозитории, ну или пишете свои. Ну что такое сниппеты и чанки сами прочитаете.

Вот по быстрому накидал:
HTML:
<div class="wrapper"></div>
CSS:

body,html {
  width: 100%;
  height: 100%;
}

.wrapper {
  width: 100%;
  height: 100%;
  transition: background 1s;
  background: none;
}

JS:

(function (w, d) {
	w.onload = function () {
		var wp = d.querySelector('.wrapper'),
        colors = ['yellow', 'red', 'green', 'blue'],
        ln = colors.length;
    
    var changeColor = function (i) {
      if (i < ln) {
        setTimeout(function () {
          wp.style.cssText = "background: " + colors[i] +";"; 
          i++;
          changeColor(i);
        }, 2000);
      } else {
        changeColor(0);
      }
    };
    
    changeColor(0);
  };
}(window, document));

Это на чистом js, его легко можно заменить на jQuery.
Рабочий пример.

Например так:

var http = require('http');
var fs = require('fs');

var file = fs.createWriteStream("file.jpg");
var request = http.get("http://test/test.jpg", function(response) {
  response.pipe(file);
});