JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    hello
</header>

CSS

html,body{
    width:100%;
    height:100%;
    float:left;
}
header {
    width:100%;
    height:100%;
    float:left;    
}

JavaScript

$(window).scroll(function() {
    if ($(this).scrollTop() > 400) {
        $("header").css("background", "url(http://www.kreativestudio.ca/wp-content/themes/parasponsive/images/header_bg2.png) repeat-x scroll 0px rgba(0, 0, 0, 0)");
    } 
    else {
        $("header").css("background", "url(http://www.kreativestudio.ca/wp-content/themes/parasponsive/images/header_bg.png) repeat-x scroll 0px rgba(0, 0, 0, 0)");
    }
});