JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <div class="logo"></div>
</header>
<input type="button" value="Add bg" id="btnAdd">

CSS

header {
    background-image: url('http://jimdo.wpengine.com/wp-content/uploads/2014/01/tree-247122.jpg');
    background-repeat: no-repeat, no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: left center, right center;
    height: 550px;
    width: 100%;
}

JavaScript

var top_header = '';
$(document).ready(function(){
  top_header = $('header');
});
$(window).scroll(function () {
  var st = $(window).scrollTop();
  top_header.css({'background-position':"left center,"+"right "+ (st*.5)+"px"});
});
$("#btnAdd").click(function () {    
    var bg = $("header").css('background-image');
    $("header").css('background-image', bg + ', url("http://www.wired.com/wp-content/uploads/images_blogs/rawfile/2013/11/offset_RonnyRitschel_23712-1-660x660.jpg")');
});