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;

}

bg.style.backgroundImage= "url('background.jpg')"; try this instead. — J. Langer
– J. Langer, Commented Jul 23, 2017 at 16:44

Dinesh undefined · Accepted Answer · 2017-07-23 16:44:46Z

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)';
    }

answered Jul 23, 2017 at 16:44

Dinesh undefined

5,5262 gold badges22 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Phil Schuster Over a year ago

Thank you that makes sense I'll try as soon as I get home!

Collectives™ on Stack Overflow

how to get javascript to edit background picture in css file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related