JSFiddle - React, Tailwind, and code Playground

by BuddhiP

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body id="page1">
<div class="body1" >
    <div id="fundo" class="bodyoff">
        <div class="main">
<!-- header -->
            <header>
                <div id="a">
                    <h1><img id="logoimg" tittle="my logo" src="http://img211.imageshack.us/img211/1775/logoex.png"></img>
                </div>
            </header>
            <div class="ic">myweb.com.br</div>
<!-- / header -->

        </div>
    </div>
</div>
</body>
</html>

CSS

.main {
                margin: 0 auto;
                width: 900px;
            }
            a {
                background: transparent;
                border: 0 none;
                font-size: 100%;
                margin: 0;
                padding: 0;
                border: 0;
                outline: 0;
                vertical-align: top;
            }
            header {
                height: 266px;
                width: 100%;
                overflow: hidden;
            }
            .bodyoff {
                background: url(http://img195.imageshack.us/img195/3424/bgimgturnoff.jpg) top center no-repeat;
                height: 100%;
                min-height: 745px;
            }
            .body1 {
                background: url(http://img825.imageshack.us/img825/8866/bgtopa.jpg) top repeat-x;
                height: 100%;
                min-height: 745px;
            }
            .body2 {
                background: url(http://img443.imageshack.us/img443/8756/bgimg.jpg) top center no-repeat;
                height: 100%;
                min-height: 745px;
            }
            #logo {
                display: block;
                background: url(http://img211.imageshack.us/img211/1775/logoex.png) repeat;
                width: 319px;
                height: 86px;
                text-indent: -9999px;
            }
            h1 {
                float: left;
                padding: 114px 0 0 63px;
            }

JavaScript

$("#logoimg").click(
        function(){
            $("#fundo").toggleClass("body2");
        }
    );