Background Color Switcher

Give your site a splash of color. This script demonstrates how to dynamically modify the CSS properties of the document body using JavaScript.

Pick a Color

Copy the Script

<script>
function setBg(color) {
    document.body.style.backgroundColor = color;
}
</script>

<button onclick="setBg('red')">Red</button>
<button onclick="setBg('#00ff00')">Green</button>

Frequently Asked Questions

This specific script does not. If you want the choice to persist after a refresh, check out our 'Simple Background Toggle' which uses Cookies.

Yes. You would just modify `document.body.style.backgroundImage` instead of `backgroundColor`.

Yes. You can pass any valid CSS color string, such as '#ff0000', 'rgb(0,0,0)', or color names like 'blue'.