/*This css bit can go anywhere where it says <style type="text/css">*/

 #wrapper #colourbuttons {
                width:60px;
                height:665px ;
                background-color: rgba(10,10,10,0.6);/*This is the dark bg for the sidebar, change first 3 for colour and last for opacity*/
                position:fixed;
                top:0px;
                left:0px;
            }
            /*red*/
           #button1 {
                background-image: url(http://i.imgur.com/zcor5R3.png); /*this is what the button looks like*/
                width: 50px;
                height: 50px;
                margin: 5px;
           }
           /*bronze*/
            #button2 {
                background-image: url(http://i.imgur.com/Lflm8KF.png);
                width: 50px;
                height: 50px;
                margin: 5px;
           }
           /*yellow*/
            #button3 {
                background-image: url(http://i.imgur.com/xJp83xx.png);
                width: 50px;
                height: 50px;
                margin: 5px;

            }

             /*lime-green*/
            #button4 {
                background-image: url(http://i.imgur.com/xVZKDnH.png);
                width: 50px;
                height: 50px;
                margin: 5px;
            }

               /*green*/
            #button5 {
                background-image: url(http://i.imgur.com/BSaSQRc.png);
                width: 50px;
                height: 50px;
                margin: 5px;
            }



                /*teal*/
            #button6 {
                background-image: url(http://i.imgur.com/Iz9ZllK.png);
                width: 50px;
                height: 50px;
                margin: 5px;
            }

            /*blue*/
             #button7 {
                background-image: url(http://i.imgur.com/hqB5qtR.png);
                width: 50px;
                height: 50px;
                margin: 5px;
            }

            /*lavender*/
             #button8 {
                background-image: url(http://i.imgur.com/R5t0XKk.png);
                width: 50px;
                height: 50px;
                margin: 5px;
            }

            /*purple*/
             #button9 {
                background-image: url(http://i.imgur.com/bO2g5cV.png);
                width: 50px;
                height: 50px;
                margin: 5px;
            }

             /*peach-y pink*/
             #button10 {
                background-image: url(http://i.imgur.com/qMu6mUP.png);
                width: 50px;
                height: 50px;
                margin: 5px;
            }

             /*greyish pink*/
             #button11 {
                background-image: url(http://i.imgur.com/VFTeyLL.png);
                width: 50px;
                height: 50px;
                margin: 5px;
            }

            /*grey*/
             #button12 {
                background-image: url(http://i.imgur.com/JCiRb5u.png);
                width: 50px;
                height: 50px;
                margin: 5px;
            }



 <!--This whole thing needs to go in the body. If you place it just in the body the background for the buttons will completely vanish. If you want it with that try to find a wrapper within the body in which most things are placed and put it there
If the buttons seem to take the whole space of the screen, pushing all your posts down, make sure you pasted this below the title not above it-->

 <div id="colourbuttons">
            <div id="button1" onclick="changebg1()"></div>
            <div id="button2" onclick="changebg2()"></div>
            <div id="button3" onclick="changebg3()"></div>
            <div id="button4" onclick="changebg4()"></div>
            <div id="button5" onclick="changebg5()"></div>
            <div id="button6" onclick="changebg6()"></div>
            <div id="button7" onclick="changebg7()"></div>
            <div id="button8" onclick="changebg8()"></div>
            <div id="button9" onclick="changebg9()"></div>
            <div id="button10" onclick="changebg10()"></div>
            <div id="button11" onclick="changebg11()"></div>
            <div id="button12" onclick="changebg12()"></div>


<script>
function changebg1()
{ document.body.style.background = "#E62929 url(http://i.imgur.com/XHechNJ.jpg) top right fixed" ;
document.body.style.backgroundSize="100%";

}


function changebg2()
{ document.body.style.background = "#de913e url(http://i.imgur.com/4O6cAcV.jpg) top right fixed" ;
document.body.style.backgroundSize="100%";

}



function changebg3()
{ document.body.style.background = "#FFFF45 url(http://i.imgur.com/ccXM2tt.jpg) top right fixed" ;
document.body.style.backgroundSize="100%";
}



function changebg4()
{ document.body.style.background = "#99FF33 url(http://i.imgur.com/ZaaJFPO.jpg) top right fixed" ;
document.body.style.backgroundSize="100%";
}


function changebg5()
{ document.body.style.background = "#8cc25f url(http://i.imgur.com/auJvxsP.jpg) top right fixed" ;
document.body.style.backgroundSize="100%";
}


function changebg6()
{ document.body.style.background = "#75c9a3 url(http://i.imgur.com/nsYJozI.jpg) top right fixed" ;
document.body.style.backgroundSize="100%";
}

function changebg7()
{ document.body.style.background = "#74a7b8 url(http://i.imgur.com/Ntz1uDi.jpg) top right fixed" ;
document.body.style.backgroundSize="100%";
}

function changebg8()
{ document.body.style.background = "#af8aff url(http://i.imgur.com/Pl7mbxp.jpg) top right fixed" ;
document.body.style.backgroundSize="100%";
}

function changebg9()
{ document.body.style.background = "#B66EE0 url(http://i.imgur.com/OLPAZXe.jpg) top right fixed" ;
document.body.style.backgroundSize="100%";
}

function changebg10()
{ document.body.style.background = "#FFAC9F url(http://i.imgur.com/rgSM5hu.jpg) top right fixed" ;
document.body.style.backgroundSize="100%";
}

function changebg11()
{ document.body.style.background = "#caaaa7 url(http://i.imgur.com/BhLl5cf.jpg) top right fixed" ;
document.body.style.backgroundSize="100%";
}

function changebg12()
{ document.body.style.background = "#969696 url(http://i.imgur.com/GGABLGW.jpg) top right fixed" ;
document.body.style.backgroundSize="100%";
}
</script>