how to get javascript to edit background picture in css file

Question

I have a button that I want to change the current background but can not figure out how to make javascript know what my class is for my background picture which is set in css. I found a way by changing the class to just header but thats not really what I wanna do. sry for sloppy coding.

<script type="text/javascript">
    function ps() {
        var bg = document.getElementsByTagName('headBack')[0];
        bg.style.backgroundImage= 'url(background.jpg)';
    }
</script>
<header class="headBack">

</header>
<div class="slideButtons">

<ul>
    <li class="active">
        <button class="button" onclick="ps()"></button>
    </li>
</ul>

my css

.headBack {

background-image: url(background2.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
height: 600px;

}

Answer 1

You need to use document.getElementsByClassName not document.getElementsByTagName for your requirement

 function ps() {
        var bg = document.getElementsByClassName('headBack')[0];
        bg.style.backgroundImage= 'url(background.jpg)';
    }