JSFiddle - React, Tailwind, and code Playground

by johnkpaul

HTML

<body class="original-background">
    <ul>
        <li>example 1</li>
        <li>example 2</li>
        <li>example 3</li>
        <li>example 4</li>
        <li>example 5</li>
    </ul>
</body>

CSS

.original-background{    background:url(http://img850.imageshack.us/img850/2400/rowofstars.gif) repeat;
}

.diagonal-background:before{
    content:"";
    background:url(http://img850.imageshack.us/img850/2400/rowofstars.gif) repeat;
    width:200%;
    height:200%;
    position:absolute;
    top:0px;
    left:0px;
    z-index:-1;
    -webkit-transform:rotate(-13deg) translate(10px,-220px); 
    -moz-transform:rotate(-13deg) translate(10px,-220px); 
    -o-transform:rotate(-13deg) translate(10px,-220px); 
    -ms-transform:rotate(-13deg) translate(10px,-220px); 
}

.diagonal-background{
    overflow:hidden;
}

JavaScript

document.onclick = function(){
    if(document.body.className == "original-background"){
        document.body.className = "diagonal-background";
    }
    else{
        document.body.className = "original-background"
    }
    
}