JSFiddle - React, Tailwind, and code Playground

by timsalabim

HTML

<div id="multi-background"></div>

CSS

div#multi-background {
    width: 1400px;
    height: 700px;
    background-image: url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/right-1.png), url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/left-1.png);
    background-position: center right, top left;
    background-repeat: no-repeat;
}

@media only screen and (min-width: 481px) {
//Happens when the screen size is >= 481px
 div#multi-background {
    width: 100%;
    height: 100%;
    background-image: url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/right-1.png), url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/left-1.png);
    background-position: center right, top left;
    background-repeat: no-repeat;
 }
}

@media only screen and (max-width: 481px) {
//Happens when the screen size is <= 481px
 div#multi-background {
   background-image: none;
 }
}